Components

Beautifully designed, accessible components built on headless primitives. Copy the code, customize to your needs.

Button
Clickable actions with 6 variants and 5 sizes.
FormsInteractive
Input
Single-line text input with validation states.
Forms
Textarea
Multi-line text input with resize control.
Forms
Notifications
Marketing
Checkbox
Tri-state checkbox with indeterminate support.
Forms
Option A
Option B
Radio
Mutually exclusive selection within a group.
Forms
Enabled
Switch
Binary toggle between on and off.
Forms
Select
Dropdown selection with keyboard navigation.
Forms
Required field
Form
Form container with validation and error display.
Forms
Are you sure?
This action cannot be undone.
Dialog
Modal dialog with focus trap and backdrop.
Overlay
Hover me
Helpful tooltip text
Tooltip
Contextual info on hover or focus.
Overlay
Success
Changes saved.
Toast
Temporary notification with auto-dismiss.
Overlay
Profile
Preferences
Popover
Anchored floating content panel.
Overlay
Tab content here
Tabs
Tabbed interface with arrow key navigation.
Navigation
Section 1
Content here...
Section 2 +
Accordion
Collapsible content sections.
Navigation
Profile
Settings
Delete
Menu
Dropdown with keyboard and type-ahead.
Navigation
DefaultSecondaryOutlineDestructive
Badge
Status label with 4 variants.
Data Display
Project Alpha
A brief description of the card content and purpose.
Card
Container with header, body, and footer.
Data Display
Skeleton
Loading placeholder animation.
Data Display
Loading...
Spinner
Animated loading indicator.
Data Display
65%
Progress
Progress bar, determinate and indeterminate.
Data Display
Stack
Flex container with direction and spacing.
Layout
Above
Below
Divider
Visual separator between content sections.
Layout
Heading
h1 through h6
Heading
Heading levels h1-h6 with size mapping.
Typography
The quick brown fox jumps over the lazy dog.
Text
Text with configurable size, weight, and color.
Typography
Link
Styled link with external support.
Typography
Information
Your session will expire in 5 minutes.
Alert
Contextual feedback message.
Feedback
Left
Right
Separator
Semantic or decorative divider.
Utility
Screen reader only
VisuallyHidden
Screen-reader-only content.
Utility