Components

A reference of all available UI components, grouped 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.

Layout

Card

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

import { ... } from "@/components/ui/card"

Separator

Horizontal or vertical divider line between sections.

import { ... } from "@/components/ui/separator"

Tabs

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

import { ... } from "@/components/ui/tabs"

Sheet

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

import { ... } from "@/components/ui/sheet"

Form

Input

Text input field with consistent border and focus ring styling.

import { ... } from "@/components/ui/input"

Select

Dropdown select menu built on Radix UI Select primitive.

import { ... } from "@/components/ui/select"

Textarea

Multi-line text input with auto-sizing support.

import { ... } from "@/components/ui/textarea"

Checkbox

Boolean toggle with checkmark indicator. Supports indeterminate state.

import { ... } from "@/components/ui/checkbox"

Switch

Toggle switch for on/off boolean states.

import { ... } from "@/components/ui/switch"

Label

Accessible label element that pairs with form inputs.

import { ... } from "@/components/ui/label"

Radio Group

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

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

Form

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

import { ... } from "@/components/ui/form"

Data Display

Badge

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

import { ... } from "@/components/ui/badge"

Table

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

import { ... } from "@/components/ui/table"

Avatar

User avatar with image and fallback initials support.

import { ... } from "@/components/ui/avatar"

Progress

Horizontal progress bar with animated fill.

import { ... } from "@/components/ui/progress"

Skeleton

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

import { ... } from "@/components/ui/skeleton"

Feedback

Dialog

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

import { ... } from "@/components/ui/dialog"

Tooltip

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

import { ... } from "@/components/ui/tooltip"

Sonner (Toast)

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

import { ... } from "@/components/ui/sonner"

Popover

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

import { ... } from "@/components/ui/popover"

Navigation

Breadcrumb

Trail of links showing the current page hierarchy.

import { ... } from "@/components/ui/breadcrumb"

Dropdown Menu

Context menu with items, separators, and keyboard navigation.

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

Command

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

import { ... } from "@/components/ui/command"

Button

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

import { ... } from "@/components/ui/button"

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 "@/components/ui/button";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Badge } from "@/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.