Component library
Every primitive a SaaS site needs
Browse 45 themed primitives — overlays, forms, data tables, charts, navigation. Click any tile for a live preview, the import line, and a copy-paste snippet.
Forms & Inputs13
The primary action affordance. Six variants × four sizes, plus icon-only sizes.
Compact label for status, counts, or tags. Mirrors Button variants.
Single-line text input. Bind to react-hook-form via RHFTextField when in a form.
Multi-line text input. Pair with RHFTextarea for forms.
Accessible form label. Wraps Base UI Field.Label.
Boolean toggle with checked / indeterminate states.
Single-choice from a small set of options.
Single-choice from a longer list. Keyboard-navigable.
Searchable single-select. Built on Base UI Combobox.
Inline toggle for boolean settings. Use in place of Checkbox for live settings.
Continuous numeric input with optional thumbs.
Two-state push button (on / off).
Group of toggles that share state. Single or multi-select.
Overlays11
Modal dialog. Auto-portals + focuses on open. Use AlertDialog for confirmations.
Confirmation modal. Blocks interaction until the user resolves the prompt.
Anchored floating panel. Useful for inline editors or pickers.
Hover / focus hint. Pure description — never use for critical content.
Rich preview on hover (user card, link preview). Heavier than Tooltip.
Side-anchored panel for filters or settings. Slides in from any edge.
Mobile-first bottom drawer with iOS-style drag (vaul).
Anchored menu with items, sub-menus, checkbox / radio items, separators.
Right-click / long-press menu. Same item vocabulary as Dropdown Menu.
Right-click anywhere here
Application-style horizontal menu bar with hover-to-switch sub-menus.
Searchable command palette (cmdk). Pair with CommandDialog for ⌘K UX.
Feedback5
Inline status / info / warning / error banner.
Linear progress indicator.
Loading placeholder. Compose into card / row shapes while data is fetching.
Animated loading indicator. Use inline with text for short waits.
Toast notifications (sonner). Toaster is mounted globally — call toast() anywhere.
Data Display5
User avatar with image + initials fallback.
Container with header / content / footer. The bread-and-butter of admin UIs.
Semantic table with the styling shadcn ships. Use DataTable for sort + paginate.
TanStack-driven table with sort, filter, pagination wired in.
Recharts wrapper that emits theme-token CSS variables for series colors.
Navigation4
In-page tab switcher. Vertical orientation supported.
Trail of links pointing back through the page hierarchy.
Page-link nav for split content (lists, search results).
Header-style nav with rich popover panels. Best for marketing site headers.
Layout5
Vertically stacked headers that expand to reveal content. Single or multi-open.
Single show / hide region. Lighter than Accordion when you only need one panel.
Horizontal or vertical divider. Pure semantic — no spacing baked in.
Cross-browser custom scrollbar wrapper.
Draggable split panels (react-resizable-panels v4).
Extras2
Inline keyboard-shortcut badge. Use for ⌘K and similar hints.
Syntax-styled code with a built-in copy button.