UI Components Library

Overview

The UI components library is built on Radix UI primitives with custom styling using Tailwind CSS. All components are located in src/components/ui/.

Component List

Form Components

Button (button.tsx)

Styled button component with variants.

Variants:

• default, destructive, outline, secondary, ghost, link

Sizes:

• default, sm, lg, icon

Input (input.tsx)

Text input component with styling.

Features:

• Standard HTML input props
• Consistent styling
• Disabled state support

Textarea (textarea.tsx)

Multi-line text input component.

Features:

• Auto-resize option
• Standard HTML textarea props

Label (label.tsx)

Form label component.

Usage:

<Label htmlFor="email">Email</Label>
<Input id="email" />

Checkbox (checkbox.tsx)

Checkbox input component.

Features:

• Controlled/uncontrolled modes
• Indeterminate state support

Radio Group (radio-group.tsx)

Radio button group component.

Features:

• Single selection
• Controlled value

Select (select.tsx)

Dropdown select component.

Features:

• Searchable option
• Multi-select support
• Custom option rendering

Layout Components

Card (card.tsx)

Card container component.

Sub-components:

• CardHeader: Card header section
• CardTitle: Card title
• CardDescription: Card description
• CardContent: Card main content
• CardFooter: Card footer section

Usage:

<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
    <CardDescription>Description</CardDescription>
  </CardHeader>
  <CardContent>Content</CardContent>
  <CardFooter>Footer</CardFooter>
</Card>

Separator (separator.tsx)

Visual separator component.

Orientations:

• horizontal (default)
• vertical

Scroll Area (scroll-area.tsx)

Custom scrollable container.

Features:

• Custom scrollbar styling
• Smooth scrolling

Navigation Components

Sidebar (sidebar.tsx)

Collapsible sidebar component.

Sub-components:

• SidebarProvider: Context provider
• Sidebar: Main sidebar container
• SidebarHeader: Sidebar header
• SidebarContent: Sidebar content area
• SidebarFooter: Sidebar footer
• SidebarMenu: Menu container
• SidebarMenuItem: Menu item
• SidebarMenuButton: Menu button
• SidebarInset: Main content area

Features:

• Collapsible (icon-only mode)
• Responsive
• Keyboard navigation

Breadcrumb (breadcrumb.tsx)

Breadcrumb navigation component.

Usage:

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>Current</BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Tabs (tabs.tsx)

Tab navigation component.

Sub-components:

• TabsList: Tab list container
• TabsTrigger: Individual tab trigger
• TabsContent: Tab content panel

Usage:

<Tabs defaultValue="tab1">
  <TabsList>
    <TabsTrigger value="tab1">Tab 1</TabsTrigger>
    <TabsTrigger value="tab2">Tab 2</TabsTrigger>
  </TabsList>
  <TabsContent value="tab1">Content 1</TabsContent>
  <TabsContent value="tab2">Content 2</TabsContent>
</Tabs>

Overlay Components

Dialog (dialog.tsx)

Modal dialog component.

Sub-components:

• DialogTrigger: Button to open dialog
• DialogContent: Dialog content container
• DialogHeader: Dialog header
• DialogTitle: Dialog title
• DialogDescription: Dialog description
• DialogFooter: Dialog footer

Usage:

<Dialog>
  <DialogTrigger>Open</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Title</DialogTitle>
      <DialogDescription>Description</DialogDescription>
    </DialogHeader>
    Content
    <DialogFooter>
      <Button>Close</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Drawer (drawer.tsx)

Slide-out drawer component (mobile-friendly).

Features:

• Slide from bottom/side
• Backdrop overlay
• Close on backdrop click

Sheet (sheet.tsx)

Sheet component (similar to drawer).

Features:

• Slide from side
• Multiple sizes
• Responsive behavior

Tooltip (tooltip.tsx)

Tooltip component.

Usage:

<Tooltip>
  <TooltipTrigger>Hover me</TooltipTrigger>
  <TooltipContent>Tooltip text</TooltipContent>
</Tooltip>

Data Display Components

Table (table.tsx)

Table component.

Sub-components:

• Table: Table container
• TableHeader: Header row container
• TableBody: Body container
• TableFooter: Footer row container
• TableRow: Table row
• TableHead: Header cell
• TableCell: Data cell

Usage:

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Email</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>John</TableCell>
      <TableCell>john@example.com</TableCell>
    </TableRow>
  </TableBody>
</Table>

Badge (badge.tsx)

Badge component for labels and status indicators.

Variants:

• default, secondary, destructive, outline

Usage:

<Badge variant="default">New</Badge>
<Badge variant="destructive">Error</Badge>

Avatar (avatar.tsx)

Avatar component for user images.

Sub-components:

• AvatarImage: Avatar image
• AvatarFallback: Fallback text/icon

Usage:

<Avatar>
  <AvatarImage src="/avatar.jpg" />
  <AvatarFallback>JD</AvatarFallback>
</Avatar>

Skeleton (skeleton.tsx)

Loading skeleton component.

Usage:

<Skeleton className="h-4 w-[250px]" />

Interactive Components

Dropdown Menu (dropdown-menu.tsx)

Dropdown menu component.

Sub-components:

• DropdownMenuTrigger: Trigger button
• DropdownMenuContent: Menu content
• DropdownMenuItem: Menu item
• DropdownMenuSeparator: Separator
• DropdownMenuLabel: Menu label
• DropdownMenuCheckboxItem: Checkbox item
• DropdownMenuRadioGroup: Radio group

Toggle (toggle.tsx)

Toggle button component.

Features:

• Pressed/unpressed states
• Variants: default, outline

Toggle Group (toggle-group.tsx)

Group of toggle buttons.

Types:

• single: Single selection
• multiple: Multiple selection

Utility Components

Pagination (pagination.tsx)

Pagination component.

Sub-components:

• PaginationList: Page number list
• PaginationItem: Page number item
• PaginationLink: Page link
• PaginationPrevious: Previous button
• PaginationNext: Next button
• PaginationEllipsis: Ellipsis indicator

Search Input (search-input.tsx)

Search input with icon.

Features:

• Search icon
• Clear button
• Debounced input (optional)

Sortable Table Header (sortable-table-header.tsx)

Table header with sorting functionality.

Features:

• Sort indicators
• Click to sort
• Sort direction (asc/desc)

Stepper (stepper.tsx)

Multi-step form component.

Features:

• Step indicators
• Active step highlighting
• Step validation

Notification Components

Sonner (sonner.tsx)

Toast notification component (wrapper for Sonner library).

Usage:

import { toast } from "sonner";
 
toast.success("Success message");
toast.error("Error message");
toast.info("Info message");

Chart Components

Chart (chart.tsx)

Chart component wrapper (for Recharts).

Features:

• Configurable chart types
• Responsive sizing
• Customizable styling

Styling

All components use Tailwind CSS for styling with:

• Consistent color scheme
• Dark mode support (via next-themes)
• Responsive design
• Accessibility features

Usage Best Practices

1. Import components individually to optimize bundle size
2. Use TypeScript for type safety
3. Follow component composition patterns for complex UIs
4. Leverage sub-components for flexible layouts
5. Use variants for different visual styles
6. Handle loading and error states appropriately