Components
16 components across 5 categories — each with live preview, prop controls, and full documentation.
Input
A text field for capturing user input. Supports labels, hints, error states, and multiple input types.
Select
A custom dropdown for choosing from a list of options. Supports keyboard navigation and accessible labeling.
Toggle
A switch control for boolean settings that take immediate effect — no confirmation required.
Badge
A compact status indicator for labeling, classifying, or highlighting elements.
Card
A surface container for grouping related content, data, or actions into a cohesive unit.
Avatar
Represents a user or entity. Displays a photo, or gracefully falls back to initials.
Skeleton
A loading placeholder with a shimmer animation that mimics the shape of the content it replaces.
Alert
Displays a contextual status message. Use for important feedback that requires user attention.
Tooltip
A non-interactive floating label that appears on hover or focus to provide supplementary context.
Modal
A dialog overlay that focuses user attention on a task or confirmation. Use sparingly.
Toast
A transient notification that appears at the edge of the screen and auto-dismisses.
Spinner
An animated loading indicator communicating that a process is in progress.