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";

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.