VLLNT UI · Famille de composants
Composants Core
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 storyLisible par les agents
Votre agent IA peut aussi les installer.
Le registre est expose comme donnees structurees, afin que les agents de code choisissent le bon composant sans scraper le HTML.
Questions frequentes
- 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.