VLLNT UI · Component family
Core components
Core components are the primitives every interface is built from — buttons, inputs, labels, switches, badges, and the layout atoms underneath them. They're unopinionated, accessible, and the foundation the rest of the library composes on.
Buttons & Actions
Buttons, copy-to-clipboard controls, toggles, and toolbars for triggering and grouping primary user actions.
Button
Interactive button with multiple variants and sizes.
9 storiesCopy Button
Click-to-copy utility with confirmation feedback and a useCopyToClipboard hook.
4 storiesToggle
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 storiesForm Inputs
Core input primitives including text fields, checkboxes, radios, switches, sliders, and labels for capturing user data.
Input
Text input field for forms.
1 storyTextarea
Multi-line text input field.
1 storyCheckbox
Toggle control for boolean input.
1 storyRadio Group
Group of radio buttons for single-selection input.
1 storySwitch
Toggle switch control for binary on/off state.
1 storySlider
Range slider input for selecting numeric values.
1 storyLabel
Accessible form label that associates descriptive text with an input control.
1 storyStatus & Feedback
Badges, banners, meters, skeleton loaders, empty states, and cookie consent for surfacing status and system feedback.
Badge
Small status label with variant styles.
4 storiesBanner
Full-width announcement bar with variants, dismissal, and an optional action slot.
6 storiesMeter
Static measurement bar (role=meter) for a known range, with optional segments.
3 storiesSkeleton
Placeholder loading animation for content.
1 storyEmpty State
Centered placeholder for empty lists, tables, and search results with sm/md/lg sizes.
4 storiesCookie Consent
Dismissible cookie-consent banner with positional variants and accept / reject actions for privacy compliance.
1 storyLayout & Surfaces
Structural primitives like grids, panels, and separators for composing page layout and content surfaces.
Content & Display
Avatars, typography, links, QR codes, and keyboard hints for presenting content and identity.
Avatar
Displays a user avatar image with fallback initials.
1 storyTypography
Semantic text primitives: headings, paragraph, lead, muted, blockquote, inline code, and list.
4 storiesLink
Styled anchor with emphasis variants and an external-link affordance.
4 storiesQR Code
Renders a QR code from a string value as a theme-aware SVG.
3 storiesKbd
Keyboard key indicator with platform-aware modifier expansion via the shortcut prop.
6 storiesTypography
Text, heading, display, and prose primitives with token-driven font family, weight, and type scale for consistent typography.
Text
Body-text primitive with token-driven sans family and a size/tone/weight scale; polymorphic via `as`.
2 storiesHeading
Semantic heading (h1–h6) with theme-overridable font-family, weight, and size design tokens.
3 storiesDisplay
Oversized hero/display text driven by the display tokens, with an optional reduced-motion-safe reveal.
3 storiesProse
Long-form content wrapper that styles raw HTML descendants with the token-driven type scale.
1 storyReadable by agents
Your AI agent can install these too.
The registry is exposed as structured data, so coding agents pick the right component without scraping HTML.
Frequently asked
- What counts as a core component?
- The foundational, unopinionated primitives — Button, Input, Label, Switch, Badge, Kbd, Separator, and the layout atoms — that every other component composes from.
- Do I have to install all of them?
- No. Every @vllnt/ui component installs independently with the shadcn CLI — add only the ones you use.