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
Bouton React accessible avec variantes, tailles et support clavier complet — installez-le depuis le registre VLLNT UI avec la CLI shadcn.
9 storiesCopy Button
Utilitaire de copie en un clic avec retour de confirmation et un hook useCopyToClipboard. Installez Copy Button depuis le registre VLLNT UI avec la CLI shadcn.
4 storiesToggle
Bouton bascule a deux etats. Installez Toggle depuis le registre VLLNT UI avec la CLI shadcn.
4 storiesToggle Group
Groupe de boutons bascule pour une selection simple ou multiple. Installez Toggle Group depuis le registre VLLNT UI avec la CLI shadcn.
1 storyToolbar
Groupe de controles horizontal (role=toolbar) avec focus mobile par fleches et separateurs. Installez Toolbar depuis le registre VLLNT UI avec la CLI shadcn.
2 storiesForm Inputs
Core input primitives including text fields, checkboxes, radios, switches, sliders, and labels for capturing user data.
Input
Champ de saisie de texte pour formulaires. Installez Input depuis le registre VLLNT UI avec la CLI shadcn.
1 storyTextarea
Champ de saisie de texte multiligne. Installez Textarea depuis le registre VLLNT UI avec la CLI shadcn.
1 storyCheckbox
Controle a bascule pour une saisie booleenne. Installez Checkbox depuis le registre VLLNT UI avec la CLI shadcn.
1 storyRadio Group
Groupe de boutons radio pour une saisie a selection unique. Installez Radio Group depuis le registre VLLNT UI avec la CLI shadcn.
1 storySwitch
Interrupteur a bascule pour un etat binaire active/desactive. Installez Switch depuis le registre VLLNT UI avec la CLI shadcn.
1 storySlider
Curseur de plage pour selectionner des valeurs numeriques. Installez Slider depuis le registre VLLNT UI avec la CLI shadcn.
1 storyLabel
Etiquette de formulaire accessible qui associe un texte descriptif a un controle de saisie. Installez Label depuis le registre VLLNT UI avec la CLI shadcn.
1 storyStatus & Feedback
Badges, banners, meters, skeleton loaders, empty states, and cookie consent for surfacing status and system feedback.
Badge
Petite etiquette de statut avec des styles de variantes. Installez Badge depuis le registre VLLNT UI avec la CLI shadcn.
4 storiesBanner
Barre d'annonce pleine largeur avec variantes, fermeture et un emplacement d'action optionnel. Installez Banner depuis le registre VLLNT UI avec la CLI shadcn.
6 storiesMeter
Barre de mesure statique (role=meter) pour une plage connue, avec des segments optionnels. Installez Meter depuis le registre VLLNT UI avec la CLI shadcn.
3 storiesSkeleton
Animation de chargement de substitution pour le contenu. Installez Skeleton depuis le registre VLLNT UI avec la CLI shadcn.
1 storyEmpty State
Espace reserve centre pour listes, tableaux et resultats de recherche vides avec tailles sm/md/lg. Installez Empty State depuis le registre VLLNT UI avec la CLI shadcn.
4 storiesCookie Consent
Banniere de consentement aux cookies masquable avec des variantes de position et des actions accepter/refuser pour la conformite a la vie privee. Installez Cookie Consent depuis le registre VLLNT UI avec la CLI shadcn.
1 storyLayout & Surfaces
Structural primitives like grids, panels, and separators for composing page layout and content surfaces.
Grid
Primitive de mise en page grille CSS responsive avec props de colonnes et d'espacement par point de rupture. Installez Grid depuis le registre VLLNT UI avec la CLI shadcn.
2 storiesPanel
Surface de contenu bordee et titree avec emplacements d'en-tete, de corps et de pied de page. Installez Panel depuis le registre VLLNT UI avec la CLI shadcn.
2 storiesSeparator
Diviseur visuel entre les sections de contenu. Installez Separator depuis le registre VLLNT UI avec la CLI shadcn.
1 storyContent & Display
Avatars, typography, links, QR codes, and keyboard hints for presenting content and identity.
Avatar
Affiche une image d'avatar utilisateur avec des initiales de repli. Installez Avatar depuis le registre VLLNT UI avec la CLI shadcn.
1 storyTypography
Primitives de texte semantiques : titres, paragraphe, chapeau, texte attenue, citation, code en ligne et liste. Installez Typography depuis le registre VLLNT UI avec la CLI shadcn.
4 storiesLink
Lien stylise avec des variantes d'emphase et une indication de lien externe. Installez Link depuis le registre VLLNT UI avec la CLI shadcn.
4 storiesQR Code
Genere un QR code a partir d'une valeur de chaine sous forme de SVG adapte au theme. Installez QR Code depuis le registre VLLNT UI avec la CLI shadcn.
3 storiesKbd
Indicateur de touche clavier avec expansion des modificateurs selon la plateforme via la prop shortcut. Installez Kbd depuis le registre VLLNT UI avec la CLI shadcn.
6 storiesTypography
Text, heading, display, and prose primitives with token-driven font family, weight, and type scale for consistent typography.
Text
Primitive de texte de corps avec une famille sans-serif pilotee par des tokens et une echelle de taille/ton/graisse ; polymorphe via `as`. Installez Text depuis le registre VLLNT UI avec la CLI shadcn.
2 storiesHeading
Titre semantique (h1-h6) avec tokens de design de police, graisse et taille surchargeables par theme. Installez Heading depuis le registre VLLNT UI avec la CLI shadcn.
3 storiesDisplay
Texte d'affichage surdimensionne pilote par les tokens d'affichage, avec une revelation optionnelle respectant la reduction des animations. Installez Display depuis le registre VLLNT UI avec la CLI shadcn.
3 storiesProse
Conteneur de contenu long qui stylise les descendants HTML bruts avec l'echelle typographique pilotee par les tokens. Installez Prose depuis le registre VLLNT UI avec la CLI shadcn.
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.