Skip to content

# Components

35+ UI components organized by category. Each component is vendored source code that you own and can customize.

## Adding New Components

The project includes a `components.json` configuration file, so you can scaffold new shadcn/ui components using the CLI:

    npx shadcn@latest add accordion

This generates the component source file in `src/components/ui/` with all dependencies resolved.

## Storybook Component Browser

The project includes Storybook with 15 interactive stories covering core UI primitives, form components, and dashboard widgets. Launch it to visually browse and test components in isolation:

    npm run storybook

Storybook opens on `http://localhost:6006`. Build a static version with `npm run build-storybook`.

## Layout

### Card

Container with header, content, and footer slots. Used for stats, forms, and data panels.

`import { ... } from "@dashboardpack/core/components/ui/card"`

### Separator

Horizontal or vertical divider line between sections.

`import { ... } from "@dashboardpack/core/components/ui/separator"`

### Sheet

Slide-out panel from any edge. Used for mobile menus and detail views.

`import { ... } from "@dashboardpack/core/components/ui/sheet"`

### Accordion

Vertically stacked set of collapsible sections. Supports single or multiple open items.

`import { ... } from "@dashboardpack/core/components/ui/accordion"`

### Collapsible

Expandable/collapsible content area with trigger control.

`import { ... } from "@dashboardpack/core/components/ui/collapsible"`

### Resizable

Resizable panel layout with draggable handles for adjusting pane sizes.

`import { ... } from "@dashboardpack/core/components/ui/resizable"`

### Scroll Area

Custom scrollable container with styled scrollbars for overflow content.

`import { ... } from "@dashboardpack/core/components/ui/scroll-area"`

## Form

### Input

Text input field with consistent border and focus ring styling.

`import { ... } from "@dashboardpack/core/components/ui/input"`

### Select

Dropdown select menu built on Radix UI Select primitive.

`import { ... } from "@dashboardpack/core/components/ui/select"`

### Textarea

Multi-line text input with auto-sizing support.

`import { ... } from "@dashboardpack/core/components/ui/textarea"`

### Checkbox

Boolean toggle with checkmark indicator. Supports indeterminate state.

`import { ... } from "@dashboardpack/core/components/ui/checkbox"`

### Switch

Toggle switch for on/off boolean states.

`import { ... } from "@dashboardpack/core/components/ui/switch"`

### Label

Accessible label element that pairs with form inputs.

`import { ... } from "@dashboardpack/core/components/ui/label"`

### Radio Group

Group of radio buttons for single-select from multiple options.

`import { ... } from "@dashboardpack/core/components/ui/radio-group"`

### Form

React Hook Form integration with Zod validation and accessible error messages.

`import { ... } from "@dashboardpack/core/components/ui/form"`

### Combobox

Searchable autocomplete input combining a text field with a filtered dropdown list.

`import { ... } from "@dashboardpack/core/components/ui/combobox"`

### Date Picker

Calendar-based date selection input with popover display.

`import { ... } from "@dashboardpack/core/components/ui/date-picker"`

### Multi-Select

Select multiple values from a dropdown with tag-style display of selections.

`import { ... } from "@dashboardpack/core/components/ui/multi-select"`

### Phone Input

International phone number input with country code selector and formatting.

`import { ... } from "@dashboardpack/core/components/ui/phone-input"`

### OTP Input

One-time password input with individual digit fields and auto-advance.

`import { ... } from "@dashboardpack/core/components/ui/otp-input"`

### Color Picker

Visual color selection input with hue/saturation controls and hex value entry.

`import { ... } from "@dashboardpack/core/components/ui/color-picker"`

### File Uploader (Dropzone)

Drag-and-drop file upload area built with react-dropzone. Supports file type and size validation.

`import { ... } from "@dashboardpack/core/components/ui/file-uploader"`

### Slider

Range input for selecting a numeric value within a min/max range. Supports single and dual thumbs.

`import { ... } from "@dashboardpack/core/components/ui/slider"`

## Data Display

### Badge

Small status label with color variants: default, secondary, destructive, success, warning, outline.

`import { ... } from "@dashboardpack/core/components/ui/badge"`

### Table

HTML table primitives (Table, TableHeader, TableBody, TableRow, TableCell) with consistent styling.

`import { ... } from "@dashboardpack/core/components/ui/table"`

### Avatar

User avatar with image and fallback initials support.

`import { ... } from "@dashboardpack/core/components/ui/avatar"`

### Progress

Horizontal progress bar with animated fill.

`import { ... } from "@dashboardpack/core/components/ui/progress"`

### Skeleton

Loading placeholder with pulse animation for content that is still loading.

`import { ... } from "@dashboardpack/core/components/ui/skeleton"`

### Calendar

Monthly calendar view for date display, selection, and event management.

`import { ... } from "@dashboardpack/core/components/ui/calendar"`

### Carousel

Horizontal content slider with navigation arrows and indicator dots.

`import { ... } from "@dashboardpack/core/components/ui/carousel"`

### Chart

Recharts wrapper with theme-aware colors and consistent tooltip/legend styling.

`import { ... } from "@dashboardpack/core/components/ui/chart"`

## Feedback

### Dialog

Modal dialog with overlay, title, description, and action buttons.

`import { ... } from "@dashboardpack/core/components/ui/dialog"`

### Tooltip

Popup hint that appears on hover or focus. Positioned automatically.

`import { ... } from "@dashboardpack/core/components/ui/tooltip"`

### Sonner (Toast)

Toast notification system. Trigger with toast() from the sonner package.

`import { ... } from "@dashboardpack/core/components/ui/sonner"`

### Popover

Floating content panel triggered by a button click. Used for filters and mini-forms.

`import { ... } from "@dashboardpack/core/components/ui/popover"`

### Alert

Callout banner for important messages with icon, title, and description. Supports info, success, warning, and destructive variants.

`import { ... } from "@dashboardpack/core/components/ui/alert"`

## Navigation

### Breadcrumb

Trail of links showing the current page hierarchy.

`import { ... } from "@dashboardpack/core/components/ui/breadcrumb"`

### Dropdown Menu

Context menu with items, separators, and keyboard navigation.

`import { ... } from "@dashboardpack/core/components/ui/dropdown-menu"`

### Command

Command palette (Cmd+K) with searchable list of actions and pages.

`import { ... } from "@dashboardpack/core/components/ui/command"`

### Button

Primary action trigger with variants: default, destructive, outline, secondary, ghost, link. Multiple sizes available.

`import { ... } from "@dashboardpack/core/components/ui/button"`

### Tabs

Tabbed interface for switching between content panels. Supports controlled and uncontrolled modes.

`import { ... } from "@dashboardpack/core/components/ui/tabs"`

### Toggle Group

Group of toggle buttons for selecting one or multiple options from a set.

`import { ... } from "@dashboardpack/core/components/ui/toggle-group"`

## Shared Components

### DataTable

Full-featured data table built on TanStack Table with column filtering, sorting, pagination, CSV export, and mobile responsive card view.

`import { ... } from "@dashboardpack/core/components/shared/data-table"`

### PageHeader

Reusable page header with title, description, breadcrumbs, and action slot.

`import { ... } from "@dashboardpack/core/components/shared/page-header"`

### ConfirmDialog

Pre-configured confirmation dialog for destructive actions with customizable title, message, and button labels.

`import { ... } from "@dashboardpack/core/components/shared/confirm-dialog"`

### EmptyState

Placeholder display for empty data states with icon, title, description, and optional action button.

`import { ... } from "@dashboardpack/core/components/shared/empty-state"`

### DateRangePicker

Dual-calendar date range selector with preset ranges and popover display.

`import { ... } from "@dashboardpack/core/components/shared/date-range-picker"`

## Common Usage Pattern

All components follow the same pattern: import the named export, pass props and children, and use the `className` prop to extend styles:

    import { Button } from "@dashboardpack/core/components/ui/button";
    import { Card, CardHeader, CardTitle, CardContent } from "@dashboardpack/core/components/ui/card";
    import { Badge } from "@dashboardpack/core/components/ui/badge";
    import type { Metadata } from "next";

    export const metadata: Metadata = {
      title: "Components",
      description:
        "Catalogue of the UI primitives and shared components available in Zenith.",
    };

    export function Example() {
      return (
        <Card>
          <CardHeader>
            <CardTitle>
              Orders <Badge variant="secondary">12</Badge>
            </CardTitle>
          </CardHeader>
          <CardContent>
            <Button variant="outline" size="sm">
              View All
            </Button>
          </CardContent>
        </Card>
      );
    }

## Next Steps

Learn about Theming to customize component colors, or see the Deployment guide when you are ready to ship.