Atoms
The smallest functional units of the design system. These primitives are the foundation for all molecules and blocks.
54 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.
Primitives
Button
Triggers actions. Supports multiple variants, sizes, and icon compositions.
Button Group
Multiple related actions as a unified joined control.
Badge
Compact labels for status, categories, and metadata.
Avatar
User representations with image, fallback, and optional status indicator.
Avatar Stack
Overlapping group of avatars with optional overflow badge.
Input
Single-line text field for user input.
Label
Accessible form label that associates with its control.
Separator
Visual divider between sections, horizontal or vertical.
Card
Contained surface for grouping related content. Supports media, stats, and article layouts.
Skeleton
Loading placeholder that mimics content shape.
Textarea
Multi-line text input field.
Kbd
Keyboard shortcut display using monospaced styling.
Steps
Multi-step progress indicator. Circles, bullets, and progress-bar variants.
Aspect Ratio
Constrains content to a specific aspect ratio.
Form
Checkbox
Binary selection control, supports indeterminate state.
Radio Group
Single selection from a set of mutually exclusive options.
Switch
Toggle between two states — on and off.
Toggle
Two-state press button for toolbars and filter controls.
Toggle Group
Set of toggles with single or multiple selection.
Slider
Range input for selecting a numeric value.
Select
Dropdown list for choosing a single option.
Native Select
Styled native HTML select. No JavaScript overhead — uses the browser's built-in dropdown.
Combobox
Searchable select field with autocomplete filtering.
Command
Composable command menu with search, groups, keyboard navigation, and shortcut indicators.
Calendar
Date picker calendar with single, range, and multi-select modes.
Date Picker
Composable date input combining calendar with a popover trigger.
Input OTP
One-time password input with individual character slots.
Overlay
Dialog
Modal overlay for focused tasks and confirmations.
Alert Dialog
Confirmation modal that requires explicit user action before proceeding.
Sheet
Slide-in panel anchored to a screen edge.
Drawer
Bottom sheet that slides up from the edge, optimised for mobile.
Tooltip
Brief label that appears on hover to clarify an element.
Popover
Floating panel anchored to a trigger, for richer content.
Hover Card
Rich preview card that appears on hover over a link or element.
Dropdown Menu
Contextual menu revealed on trigger interaction.
Context Menu
Right-click menu with nested sub-menus and keyboard support.
Navigation
Menubar
Horizontal application menu bar with nested dropdown panels.
Navigation Menu
Accessible top-level navigation with animated dropdown panels.
Sidebar
Composable side navigation with collapsible, icon, and off-canvas modes.
Layout
Tabs
Organises content into switchable panels.
Accordion
Vertically stacked sections that expand and collapse.
Collapsible
Toggleable content region, building block for nav groups.
Scroll Area
Scrollable container with a styled custom scrollbar.
Breadcrumb
Navigation trail showing the current page location.
Pagination
Navigation control for multi-page content.
Carousel
Horizontally scrollable item sequence with previous/next controls.
Resizable
Drag-to-resize panel groups for flexible layouts.
Data
Table
Structured data display with rows and columns.
Data Table
Sortable, filterable table powered by TanStack Table.
Chart
Recharts-based data visualisation with design-system styling.
Feedback
Alert
Inline message communicating status or feedback.
Progress
Visual indicator of completion or loading progress.
Spinner
Animated loading indicator for async operations.
Toast
Non-blocking notifications that appear briefly and dismiss automatically.