@hublab/ui

180+ production-ready React components for building web applications with AI assistants.

Installation

npm install @hublab/ui
# or
yarn add @hublab/ui
# or
pnpm add @hublab/ui

Usage

Full Import

import { LineChart, BarChart, KPICard, DataTable } from '@hublab/ui'

Category-specific Imports

// Charts
import { LineChart, BarChart, PieChart, AreaChart } from '@hublab/ui/charts'

// Forms
import { Input, Select, Checkbox, DatePicker } from '@hublab/ui/forms'

// Tables
import { DataTable, SortableTable, FilterableTable } from '@hublab/ui/tables'

// UI Components
import { Button, Card, Modal, Badge } from '@hublab/ui/ui'

// Layouts
import { DashboardLayout, LandingPageLayout } from '@hublab/ui/layouts'

// Marketing
import { Hero, PricingTable, FeatureGrid, CTA } from '@hublab/ui/marketing'

// E-commerce
import { ProductCard, ShoppingCart, Checkout } from '@hublab/ui/ecommerce'

Components

📊 Data Visualization (30+ components)

• Line Charts, Bar Charts, Pie Charts, Area Charts
• Scatter Plots, Heatmaps, Treemaps
• KPI Cards, Metric Displays, Progress Indicators

📝 Forms (25+ components)

• Text Inputs, Textareas, Selects
• Checkboxes, Radios, Switches
• Date Pickers, Time Pickers, File Uploads
• Multi-step Forms, Form Validation

📋 Tables (15+ components)

• Data Tables with sorting/filtering
• Editable Tables, Expandable Rows
• Pagination, Search, Bulk Actions

🎨 UI Components (40+ components)

• Buttons, Cards, Badges, Avatars
• Modals, Drawers, Tooltips, Popovers
• Tabs, Accordions, Breadcrumbs
• Alerts, Notifications, Progress Bars

📐 Layouts (20+ components)

• Dashboard Layouts, Admin Panels
• Landing Page Sections
• Sidebars, Headers, Footers

🎯 Marketing (25+ components)

• Hero Sections, Feature Grids
• Pricing Tables, Testimonials
• CTAs, Newsletter Signups
• FAQ Sections, Social Proof

🛒 E-commerce (25+ components)

• Product Cards, Product Grids
• Shopping Cart, Checkout Flow
• Order Tracking, Reviews
• Filters, Search, Wishlist

Requirements

• React 18+
• Tailwind CSS 3+
• TypeScript 5+ (recommended)

Tech Stack

• Framework: React 18
• Styling: Tailwind CSS
• Icons: Lucide React
• Charts: Recharts
• Type Safety: TypeScript

Links

• Website: https://hublab.dev
• Documentation: https://hublab.dev/docs
• Examples: https://hublab.dev/examples
• GitHub: https://github.com/raym33/hublab
• NPM: https://www.npmjs.com/package/@hublab/ui

License

MIT © HubLab Team