Components

A vertically stacked set of collapsible disclosure sections, one or many open at a time.

A structural foundation for dashboards with a collapsible sidebar, topbar, and scrollable content area.

Constrains content to a fixed width-to-height ratio, e.g. 16:9 media.

A mobile-style bottom sheet with drag-to-dismiss, a grab handle, optional snap points, and a sticky footer.

A draggable, keyboard-accessible carousel powered by Embla, horizontal or vertical, with prev/next controls.

An interactive section that expands and collapses its content.

A props-driven side drawer with header, scrollable body, sticky footer, and four widths.

A flexible row primitive — media, content, title, description, and actions — for lists and option cards.

A drag-and-drop kanban board with horizontally scrolling columns, rich task cards, and an accessible move menu fallback.

Resizable panel groups with draggable handles, horizontal or vertical, powered by react-resizable-panels.

A scrollable region with a slim, styled, cross-browser scrollbar.

A two-column settings page pattern with side navigation that collapses into a horizontal tab bar on mobile.

A full application sidebar — collapsible (offcanvas/icon), mobile sheet, keyboard shortcut, menus, submenus, and an inset content area.

Consistent typographic components — headings, lead, paragraph, blockquote, list, inline code, and muted text.

A vertical timeline of grouped activity entries with icons, actors, targets, and timestamps for audit logs and event streams.

An API key list with a create dialog, masked keys, copy-to-clipboard, and revoke actions.

A production-ready data table with sorting, filtering, column visibility, row selection, and pagination built on TanStack Table.

A billing history table with status badges, formatted amounts, and per-row download actions.

A team members list with avatars, role badges, pending invites, and per-row actions for workspace settings pages.

A navigation trail showing the current page's location, with separators and an ellipsis.

A Cmd+K global command interface with grouped results, recent items, keyboard shortcuts, and a discoverability footer.

A right-click menu with items, checkboxes, radios, submenus, and shortcuts.

A desktop-style menu bar with menus, submenus, checkboxes, radios, and shortcuts.

A site navigation menu with animated dropdown panels and an optional viewport.

A stateful pagination bar with sibling/ellipsis logic, prev/next, and an optional showing x–y of z caption.

A grouped search result list with match highlighting, icons, trailing meta, and an empty state.

A segmented control wrapper that fuses adjacent buttons, horizontal or vertical, with proper focus rings.

A drop-in button wrapper with loading spinner, loading label, and left/right icon slots.

Credit card fields with live number formatting, brand detection, expiry auto-slash, and CVC length per brand.

A multi-select filter pattern for tables and lists with searchable options, removable badge chips, and a composable filter bar.

A searchable country combobox with emoji flags and a built-in ISO list with dial codes.

A two-month range picker with preset shortcuts, draft state committed on Apply, and a responsive single-month mobile layout.

Composable form-field parts: label, description, error, group, and fieldset with horizontal/vertical layout.

A keyboard-accessible drag-and-drop upload area with client-side validation, upload progress, and a controlled file list.

A complete form field — label, helper text, error state, required marker, and inline icons around an input.

Fuses inputs, text addons, and buttons into one segmented control, e.g. https:// prefixes and copy buttons.

Keyboard key caps for shortcut hints — single keys, chords with separators, and key sequences.

A searchable language list with country flags, native names, and single selection.

A styled native select — zero-JS and great on mobile — with a chevron.

A stepper input with increment/decrement buttons, min/max clamping, step precision, and arrow-key support.

A one-time-code input with auto-advance, paste support, backspace navigation, and an error state.

A phone field with a searchable flag + dial-code picker and E.164 output.

A set of checkable buttons where only one can be selected at a time.

A search input with icon, clear button, loading state, and a global Cmd/Ctrl shortcut that focuses it.

A labeled slider with live value readout, range (two-thumb) support, custom formatting, and min/max captions.

A two-state button that can be on or off, with default and outline variants.

A set of toggles where one or more can be pressed, fused into a single control.

A controlled multi-step wizard with a step indicator, per-step content panels, validation errors, and a navigation footer.

Polished sign-in, sign-up, and forgot-password forms with social login slots, inline validation, and loading states.

A responsive grid of integration cards with logos, connect toggles, tags, and a configure action.

A responsive grid of metric cards with values, trend deltas, and skeleton loading states.

A plan usage card with per-resource progress bars, near-limit warnings, and an upgrade slot.

Recharts area and bar charts wrapped in cards with header actions, styled tooltips, and legends.

A dismissible announcement bar with color variants, an icon, and an inline action link.

A three-tier pricing layout with a monthly/yearly billing toggle and a highlighted recommended plan.

A masonry wall of testimonial cards with quotes, avatars, roles, and company logos.

A user profile summary card with avatar, role badge, meta details, and quick actions.

A callout for important messages, with default and destructive variants and an icon slot.

A modal dialog that interrupts the user for a confirmation or destructive action.

A centered placeholder for empty, error, no-results, and all-caught-up states with icon, copy, and action slots.

A full-viewport centered error state for 404, 500, and 403 pages with a status numeral, message, and actions.

An emoji-rating feedback dialog with an optional comment and a thank-you state.

A card of rich preview content shown when hovering a trigger.

A bell-triggered notification popover with unread badge, all/unread tabs, and mark-all-read.

A progress bar with label, percentage readout, semantic color variants, three sizes, and an indeterminate state.

A tooltip with all four placements, optional title line, and keyboard shortcut hints.

An opinionated toast notification system — call toast() from anywhere, theme-aware.

An accessible loading spinner, sizable via className.