VLLNT UI · Component family

Core components

Browse the Core components currently implemented for the Native renderer.

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

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

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

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

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.