VLLNT UI

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.

Browse all componentsHow agents consume the registry30 components

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.

Supported platforms:WebNative
9 storiesView component

Copy Button

Click-to-copy utility with confirmation feedback and a useCopyToClipboard hook. Install Copy Button from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
4 storiesView component

Toggle

Two-state toggle button. Install Toggle from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
4 storiesView component

Toggle Group

Group of toggle buttons for single or multiple selection. Install Toggle Group from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Toolbar

Horizontal control group (role=toolbar) with arrow-key roving focus and separators. Install Toolbar from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Form 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.

Supported platforms:WebNative
1 storyView component

Textarea

Multi-line text input field. Install Textarea from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Checkbox

Toggle control for boolean input. Install Checkbox from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Radio Group

Group of radio buttons for single-selection input. Install Radio Group from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Switch

Toggle switch control for binary on/off state. Install Switch from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Slider

Range slider input for selecting numeric values. Install Slider from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Label

Accessible form label that associates descriptive text with an input control. Install Label from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Status & 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.

Supported platforms:WebNative
4 storiesView component

Banner

Full-width announcement bar with variants, dismissal, and an optional action slot. Install Banner from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
6 storiesView component

Meter

Static measurement bar (role=meter) for a known range, with optional segments. Install Meter from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
3 storiesView component

Skeleton

Placeholder loading animation for content. Install Skeleton from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Empty 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.

Supported platforms:WebNative
4 storiesView component

Cookie 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.

Supported platforms:Web
1 storyView component

Layout & 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.

Supported platforms:WebNative
2 storiesView component

Panel

Bordered, titled content surface with header, body, and footer slots. Install Panel from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Separator

Visual divider between content sections. Install Separator from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Content & 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.

Supported platforms:WebNative
1 storyView component

Typography

Semantic text primitives: headings, paragraph, lead, muted, blockquote, inline code, and list. Install Typography from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
4 storiesView component

Link

Styled anchor with emphasis variants and an external-link affordance. Install Link from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
4 storiesView component

QR 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.

Supported platforms:Web
3 storiesView component

Kbd

Keyboard key indicator with platform-aware modifier expansion via the shortcut prop. Install Kbd from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
6 storiesView component

Typography

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.

Supported platforms:WebNative
2 storiesView component

Heading

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.

Supported platforms:WebNative
3 storiesView component

Display

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.

Supported platforms:Web
3 storiesView component

Prose

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.

Supported platforms:Web
1 storyView component

Readable 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.

/llms.txt

Concise index per the llmstxt.org spec — sections, links, and descriptions.

/llms-full.txt

Full registry context in one fetch — docs plus every component descriptor.

/r/<name>.json

Per-component descriptor: props, accessibility schema, and usage examples.

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.