46+ themed primitives

Primary action element with 6 variants and 4 sizes.

import { Button } from '@/components/ui/button';

Single-line text input with focus + invalid states wired to CSS variables.

import { Input } from '@/components/ui/input';

Multi-line autosize input that mirrors the Input theming.

import { Textarea } from '@/components/ui/textarea';

Tri-state checkbox (on/off/indeterminate) — Base UI.

import { Checkbox } from '@/components/ui/checkbox';

Mutually-exclusive option set, RHF-friendly.

import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';

Toggle for boolean preferences (e.g. dark mode).

import { Switch } from '@/components/ui/switch';

Dropdown picker with keyboard navigation.

import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';

Filterable picker — composes command + popover.

import { Combobox } from '@/components/ui/combobox';

Continuous-value input with single + range modes.

import { Slider } from '@/components/ui/slider';

Single-action toggle button (e.g. text formatting bar).

import { Toggle } from '@/components/ui/toggle';

Set of toggles — single or multi-select mode.

import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';

Themed `<label>` that pairs with form fields by id.

import { Label } from '@/components/ui/label';

Standalone date picker.

import { Calendar } from '@/components/ui/calendar';

Modal dialog with focus trap + Escape handling.

import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';

Confirm-or-cancel dialog for destructive actions.

import { AlertDialog, AlertDialogAction, AlertDialogCancel } from '@/components/ui/alert-dialog';

Side drawer (left/right/top/bottom).

import { Sheet, SheetContent, SheetHeader } from '@/components/ui/sheet';

iOS-style bottom drawer (vaul) for mobile flows.

import { Drawer, DrawerContent } from '@/components/ui/drawer';

Floating panel anchored to a trigger element.

import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';

Hover/focus-only hint label — uses popover internals.

import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';

Rich-content tooltip for previews / mentions.

import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card';

Right-click + button menu with checkboxes and groups.

import { DropdownMenu, DropdownMenuContent, DropdownMenuItem } from '@/components/ui/dropdown-menu';

Right-click menu attached to any element.

import { ContextMenu, ContextMenuContent, ContextMenuItem } from '@/components/ui/context-menu';

Persistent top-of-screen menu bar (File / Edit / View …).

import { Menubar, MenubarMenu, MenubarTrigger } from '@/components/ui/menubar';

Searchable command list (⌘K) — cmdk under the hood.

import { Command, CommandInput, CommandList, CommandItem } from '@/components/ui/command';

Inline status banner — info / warning / destructive.

import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert';

Small pill for counts, statuses, tags.

import { Badge } from '@/components/ui/badge';

Determinate progress bar — accepts percent value.

import { Progress } from '@/components/ui/progress';

Pulsing placeholder for loading content.

import { Skeleton } from '@/components/ui/skeleton';

Loader2 icon wrapper with sizes + screen-reader label.

import { Spinner } from '@/components/ui/spinner';

Toast container — sonner; mounted once at the root.

import { Toaster } from '@/components/ui/sonner';

Round image with text fallback.

import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';

Bordered surface with header / content / footer slots.

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';

Plain HTML-table primitives styled to match the theme.

import { Table, TableBody, TableHead, TableRow } from '@/components/ui/table';

TanStack Table v8 wrapper with sort + paginate slots.

import { DataTable } from '@/components/ui/data-table';

Themed recharts wrapper that reads colors from CSS variables.

import { ChartContainer, ChartTooltip } from '@/components/ui/chart';

Path-style nav from root → current page.

import { Breadcrumb, BreadcrumbItem, BreadcrumbList } from '@/components/ui/breadcrumb';

Marketing-site mega-menu with hover panels.

import { NavigationMenu, NavigationMenuItem } from '@/components/ui/navigation-menu';

Numeric page list with prev/next + ellipsis.

import { Pagination, PaginationContent, PaginationItem } from '@/components/ui/pagination';

Tab list + tab panels with keyboard navigation.

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';

Vertically stacked collapsible sections (FAQ-friendly).

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@/components/ui/accordion';

Single show/hide region with smooth height transitions.

import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';

Themed scrollbar that hides natively but stays accessible.

import { ScrollArea } from '@/components/ui/scroll-area';

Horizontal/vertical divider — purely decorative.

import { Separator } from '@/components/ui/separator';

Resizable panes (left/right or top/bottom).

import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@/components/ui/resizable';

Inline `<kbd>` styled for shortcut hints.

import { Kbd } from '@/components/ui/kbd';

Themed `<pre>` with copy-to-clipboard button.

import { CodeBlock } from '@/components/ui/code-block';