Core components
The foundational building blocks every interface starts from.
26 components
Avatar
Displays a user avatar image with fallback initials.
1 storyBadge
Small status label with variant styles.
4 storiesBanner
Full-width announcement bar with variants, dismissal, and an optional action slot.
6 storiesButton
Interactive button with multiple variants and sizes.
9 storiesCheckbox
Toggle control for boolean input.
1 storyCookie Consent
Dismissible cookie-consent banner with positional variants and accept / reject actions for privacy compliance.
1 storyCopy Button
Click-to-copy utility with confirmation feedback and a useCopyToClipboard hook.
4 storiesEmpty State
Centered placeholder for empty lists, tables, and search results with sm/md/lg sizes.
4 storiesGrid
Responsive CSS grid layout primitive with breakpoint column and gap props.
2 storiesInput
Text input field for forms.
1 storyKbd
Keyboard key indicator with platform-aware modifier expansion via the shortcut prop.
6 storiesLabel
Accessible form label that associates descriptive text with an input control.
1 storyLink
Styled anchor with emphasis variants and an external-link affordance.
4 storiesMeter
Static measurement bar (role=meter) for a known range, with optional segments.
3 storiesPanel
Bordered, titled content surface with header, body, and footer slots.
2 storiesQR Code
Renders a QR code from a string value as a theme-aware SVG.
3 storiesRadio Group
Group of radio buttons for single-selection input.
1 storySeparator
Visual divider between content sections.
1 storySkeleton
Placeholder loading animation for content.
1 storySlider
Range slider input for selecting numeric values.
1 storySwitch
Toggle switch control for binary on/off state.
1 storyTextarea
Multi-line text input field.
1 storyToggle
Two-state toggle button.
4 storiesToggle Group
Group of toggle buttons for single or multiple selection.
1 storyToolbar
Horizontal control group (role=toolbar) with arrow-key roving focus and separators.
2 storiesTypography
Semantic text primitives: headings, paragraph, lead, muted, blockquote, inline code, and list.
4 stories