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
Accessible React button with variants, sizes, and full keyboard support — install from the VLLNT UI registry with the shadcn CLI.
9 storiesCopy Button
Click-to-copy utility with confirmation feedback and a useCopyToClipboard hook. Install Copy Button from the VLLNT UI registry with the shadcn CLI.
4 storiesToggle
Two-state toggle button. Install Toggle from the VLLNT UI registry with the shadcn CLI.
4 storiesToggle Group
Group of toggle buttons for single or multiple selection. Install Toggle Group from the VLLNT UI registry with the shadcn CLI.
1 storyToolbar
Horizontal control group (role=toolbar) with arrow-key roving focus and separators. Install Toolbar from the VLLNT UI registry with the shadcn CLI.
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. Install Input from the VLLNT UI registry with the shadcn CLI.
1 storyTextarea
Multi-line text input field. Install Textarea from the VLLNT UI registry with the shadcn CLI.
1 storyCheckbox
Toggle control for boolean input. Install Checkbox from the VLLNT UI registry with the shadcn CLI.
1 storyRadio Group
Group of radio buttons for single-selection input. Install Radio Group from the VLLNT UI registry with the shadcn CLI.
1 storySwitch
Toggle switch control for binary on/off state. Install Switch from the VLLNT UI registry with the shadcn CLI.
1 storySlider
Range slider input for selecting numeric values. Install Slider from the VLLNT UI registry with the shadcn CLI.
1 storyLabel
Accessible form label that associates descriptive text with an input control. Install Label from the VLLNT UI registry with the shadcn CLI.
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. Install Badge from the VLLNT UI registry with the shadcn CLI.
4 storiesBanner
Full-width announcement bar with variants, dismissal, and an optional action slot. Install Banner from the VLLNT UI registry with the shadcn CLI.
6 storiesMeter
Static measurement bar (role=meter) for a known range, with optional segments. Install Meter from the VLLNT UI registry with the shadcn CLI.
3 storiesSkeleton
Placeholder loading animation for content. Install Skeleton from the VLLNT UI registry with the shadcn CLI.
1 storyEmpty State
Centered placeholder for empty lists, tables, and search results with sm/md/lg sizes. Install Empty State from the VLLNT UI registry with the shadcn CLI.
4 storiesCookie Consent
Dismissible cookie-consent banner with positional variants and accept / reject actions for privacy compliance. Install Cookie Consent from the VLLNT UI registry with the shadcn CLI.
1 storyLayout & Surfaces
Structural primitives like grids, panels, and separators for composing page layout and content surfaces.
Grid
Responsive CSS grid layout primitive with breakpoint column and gap props. Install Grid from the VLLNT UI registry with the shadcn CLI.
2 storiesPanel
Bordered, titled content surface with header, body, and footer slots. Install Panel from the VLLNT UI registry with the shadcn CLI.
2 storiesSeparator
Visual divider between content sections. Install Separator from the VLLNT UI registry with the shadcn CLI.
1 storyContent & Display
Avatars, typography, links, QR codes, and keyboard hints for presenting content and identity.
Avatar
Displays a user avatar image with fallback initials. Install Avatar from the VLLNT UI registry with the shadcn CLI.
1 storyTypography
Semantic text primitives: headings, paragraph, lead, muted, blockquote, inline code, and list. Install Typography from the VLLNT UI registry with the shadcn CLI.
4 storiesLink
Styled anchor with emphasis variants and an external-link affordance. Install Link from the VLLNT UI registry with the shadcn CLI.
4 storiesQR Code
Renders a QR code from a string value as a theme-aware SVG. Install QR Code from the VLLNT UI registry with the shadcn CLI.
3 storiesKbd
Keyboard key indicator with platform-aware modifier expansion via the shortcut prop. Install Kbd from the VLLNT UI registry with the shadcn CLI.
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`. Install Text from the VLLNT UI registry with the shadcn CLI.
2 storiesHeading
Semantic heading (h1–h6) with theme-overridable font-family, weight, and size design tokens. Install Heading from the VLLNT UI registry with the shadcn CLI.
3 storiesDisplay
Oversized hero/display text driven by the display tokens, with an optional reduced-motion-safe reveal. Install Display from the VLLNT UI registry with the shadcn CLI.
3 storiesProse
Long-form content wrapper that styles raw HTML descendants with the token-driven type scale. Install Prose from the VLLNT UI registry with the shadcn CLI.
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.