Atoms
The smallest functional units of the design system. These primitives are the foundation for all molecules and blocks.
73 components
Based on shadcn/ui · Radix UI
How To Use This Page
Atoms are grouped by the kind of interaction they support so teams can find the right primitive before building a larger pattern.
Start in atoms when you need the smallest reusable control and want to stay close to the source component API.
How The Content Is Grouped
- The top-level Atoms page groups the catalog by subcategory, making it easier to choose a family of patterns before drilling into an implementation.
- Use the highlighted links below to start with the highest-signal areas of the section.
Start With
Accordion
Vertically stacked sections that expand and collapse.
Alert Dialog
Confirmation modal that requires explicit action before proceeding.
Alert
Inline message communicating status or feedback.
Aspect Ratio
Constrains content to a specific width-to-height ratio.
Avatar Stack
Overlapping group of avatars with optional overflow badge.
Avatar
User representations with image, fallback, and optional status indicator.
Badge
Compact labels for status, categories, and metadata.
Breadcrumb
Navigation trail showing the current page location.
Layout
Accordion
Vertically stacked sections that expand and collapse.
Breadcrumb
Navigation trail showing the current page location.
Carousel
Horizontally scrollable item sequence with previous and next controls.
Collapsible
Toggleable content region, often used for navigation groups.
Pagination
Navigation control for multi-page content.
Resizable
Drag-to-resize panel groups for flexible layouts.
Scroll Area
Scrollable container with styled custom scrollbar.
Tabs
Organizes content into switchable panels.
Tabs Subtle
Quiet segmented tab navigation for settings, filters, and compact product panels.
Overlay
Alert Dialog
Confirmation modal that requires explicit action before proceeding.
Context Menu
Right-click menu with nested sub-menus and keyboard support.
Dialog
Modal overlay for focused tasks and confirmations.
Drawer
Bottom sheet that slides up from the edge, optimized for mobile.
Dropdown
Fluid-style menu surface with proximity hover, selected state, and elevated surface treatment.
Dropdown Menu
Contextual action menu revealed from a trigger.
Help Tooltip
Inline help trigger with tooltip content and optional learn-more link.
Hover Card
Rich preview card that appears on hover over a link or element.
Popover
Floating panel anchored to a trigger for richer contextual content.
Sheet
Slide-in panel anchored to a screen edge.
Tooltip
Brief label that appears on hover or focus to clarify an element.
Feedback
Alert
Inline message communicating status or feedback.
Callout
Prominent status or guidance panel with icon, actions, and semantic tone.
Progress
Visual indicator of completion or loading progress.
Toast
Non-blocking notifications that appear briefly and dismiss automatically.
Spinner
Animated loading indicator for async operations.
Status Badge
Semantic badge that maps status values to labels, variants, icons, and dots.
Thinking Indicator
Compact animated status indicator for pending assistant or system work.
Primitives
Aspect Ratio
Constrains content to a specific width-to-height ratio.
Avatar Stack
Overlapping group of avatars with optional overflow badge.
Avatar
User representations with image, fallback, and optional status indicator.
Badge
Compact labels for status, categories, and metadata.
Button Group
Multiple related actions presented as a unified joined control.
Button
Triggers actions. Supports multiple variants, sizes, loading states, and icon compositions.
Card
Contained surface for grouping related content, media, stats, and article layouts.
Input
Single-line text field for user input.
Kbd
Keyboard shortcut display using compact monospaced styling.
Label
Accessible form label that associates text with its control.
Separator
Visual divider between sections, horizontal or vertical.
Skeleton
Loading placeholder that mimics the shape of pending content.
Steps
Multi-step progress indicator with circles, bullets, and progress variants.
Textarea
Multi-line text field for longer user input.
Form
Calendar
Date selection calendar with single, range, and multi-select modes.
Checkbox
Binary selection control with checked, unchecked, and indeterminate states.
Checkbox Card
Clickable card-style checkbox option for settings, filters, and compact binary choices.
Checkbox Group
Grouped multi-select options with contiguous product-style row highlighting.
Combobox
Searchable select field with autocomplete filtering.
Command
Composable command menu with search, groups, keyboard navigation, and shortcuts.
Date Picker
Date input pattern combining a trigger field with a calendar popover.
File Dropzone
Accessible drag-and-drop file input with loading and selected-file states.
Input OTP
One-time password input with individual character slots.
Native Select
Styled native HTML select with no JavaScript dropdown overhead.
Radio Group
Single selection from a set of mutually exclusive options.
Rich Text Editor
Toolbar-driven content editor for formatted HTML input.
Select
Dropdown list for choosing a single option.
Slider
Range input for selecting numeric values.
Switch
Toggle between two states, on and off.
Toggle Group
Set of toggles with single or multiple selection.
Toggle
Two-state press button for toolbars and filter controls.
Data
Chart
Recharts-based data visualization with design-system styling.
Data Table
Sortable, filterable table powered by TanStack Table.
Searchable Table
Responsive table with search, filters, sorting, mobile cards, and pagination.
Status Tile
Compact status tiles for service health, operational states, and responsive mobile panels.
Summary Tile
Compact metric tiles for dense dashboard summaries and responsive mobile panels.
Table
Structured data display with rows and columns.
Designer Tools
Color Input
Compact color input combining swatch, hex field, and optional opacity control.
Color Picker
Popover color selector with native color wheel, hex input, and preset palette.
Input Number
Numeric input with steppers, unit suffix, and arrow-key stepping.
Media
File Thumbnail
Compact file preview row with icon, optional image preview, type, and size metadata.
Navigation
Menu Item
Reusable command row for menus, lists, and product navigation surfaces.
Menubar
Horizontal application menu bar with nested dropdown panels.
Nav Item
Single navigation row with icon, active state, trailing content, and product motion.
Navigation Menu
Top-level navigation with accessible animated dropdown panels.
Sidebar
Composable side navigation with collapsible, icon, and off-canvas modes.