VLLNT UI · Famille de composants
Composants Content
Content components lay out and animate information — bento grids, cards, testimonials, timelines, expandable panels, and text effects. Use them to build landing pages, docs, and editorial surfaces that stay on the design system.
Cards & Layout
React card and layout components — accordions, bento grids, carousels, and expandable cards for organizing page content.
Accordion
Sections de contenu repliables prenant en charge un ou plusieurs elements ouverts. Installez Accordion depuis le registre VLLNT UI avec la CLI shadcn.
1 storyAnimated List
Liste dont les elements s'animent sequentiellement avec une entree echelonnee. Installez Animated List depuis le registre VLLNT UI avec la CLI shadcn.
1 storyAnimated Testimonials
Carrousel de temoignages avec des transitions animees entre les citations. Installez Animated Testimonials depuis le registre VLLNT UI avec la CLI shadcn.
2 storiesBento Grid
Disposition de grille de style bento reactive avec des cartes de fonctionnalites. Installez Bento Grid depuis le registre VLLNT UI avec la CLI shadcn.
1 storyBlog Card
Disposition de carte pour afficher les apercus d'articles de blog. Installez Blog Card depuis le registre VLLNT UI avec la CLI shadcn.
1 storyCard
Conteneur avec des sections en-tete, contenu et pied de page. Installez Card depuis le registre VLLNT UI avec la CLI shadcn.
1 storyCarousel
Carrousel de contenu defilable avec des controles de navigation. Installez Carousel depuis le registre VLLNT UI avec la CLI shadcn.
1 storyCollapsible
Section de contenu extensible et repliable. Installez Collapsible depuis le registre VLLNT UI avec la CLI shadcn.
1 storyExpandable Cards
Cartes qui se deploient au clic pour reveler du contenu supplementaire. Installez Expandable Cards depuis le registre VLLNT UI avec la CLI shadcn.
1 storyFAQ
Section de questions frequentes avec reponses extensibles. Installez FAQ depuis le registre VLLNT UI avec la CLI shadcn.
2 storiesSlideshow
Diaporama pas a pas pour presenter le contenu de maniere sequentielle. Installez Slideshow depuis le registre VLLNT UI avec la CLI shadcn.
2 storiesText Effects
Animated text effect components for React — blur, shimmer, scramble, typewriter, and scroll-reveal typography.
Blur Reveal
Revele le contenu avec une transition de flou vers nettete lorsqu'il apparait au defilement. Installez Blur Reveal depuis le registre VLLNT UI avec la CLI shadcn.
2 storiesReveal Text
Revele le texte avec un glissement directionnel et un fondu lorsqu'il entre dans la zone d'affichage. Installez Reveal Text depuis le registre VLLNT UI avec la CLI shadcn.
3 storiesScramble Text
Brouille les caracteres puis les resout en texte final. Installez Scramble Text depuis le registre VLLNT UI avec la CLI shadcn.
2 storiesShimmer Text
Texte avec une bande de lumiere vive qui le balaie. Installez Shimmer Text depuis le registre VLLNT UI avec la CLI shadcn.
2 storiesSpinning Text
Texte dispose en cercle qui tourne en continu. Installez Spinning Text depuis le registre VLLNT UI avec la CLI shadcn.
2 storiesText Animate
Anime l'apparition du texte mot par mot ou caractere par caractere avec des effets configurables. Installez Text Animate depuis le registre VLLNT UI avec la CLI shadcn.
4 storiesText Reveal
Attenue et eclaircit les mots a mesure que le texte defile dans la fenetre d'affichage. Installez Text Reveal depuis le registre VLLNT UI avec la CLI shadcn.
1 storyText Shimmer
Texte avec un remplissage en degrade anime qui scintille. Installez Text Shimmer depuis le registre VLLNT UI avec la CLI shadcn.
2 storiesTypewriter
Affiche le texte caractere par caractere avec un curseur clignotant. Installez Typewriter depuis le registre VLLNT UI avec la CLI shadcn.
3 storiesArticle & Media Blocks
Content blocks for articles and docs — code blocks, callouts, video embeds, timelines, and MDX rendering.
Callout
Bloc de contenu mis en evidence avec des styles de variantes pour info, avertissement, danger et plus encore. Installez Callout depuis le registre VLLNT UI avec la CLI shadcn.
1 storyCode Block
Affichage de code avec coloration syntaxique et prise en charge de la copie. Installez Code Block depuis le registre VLLNT UI avec la CLI shadcn.
1 storyCode Playground
Editeur de code interactif avec apercu en direct. Installez Code Playground depuis le registre VLLNT UI avec la CLI shadcn.
2 storiesContent Intro
Section d'introduction pour les pages de contenu avec titre et description. Installez Content Intro depuis le registre VLLNT UI avec la CLI shadcn.
2 storiesDocument Sibling Nav
Navigateur plus recent/plus ancien : liens vers l'element precedent et suivant dans une serie ordonnee. Installez Document Sibling Nav depuis le registre VLLNT UI avec la CLI shadcn.
6 storiesMDX Content
Affiche du contenu MDX avec correspondance de composants. Installez MDX Content depuis le registre VLLNT UI avec la CLI shadcn.
1 storyShare Section
Section de boutons de partage social et de copie du lien. Installez Share Section depuis le registre VLLNT UI avec la CLI shadcn.
2 storiesTerminal
Affichage de style terminal pour la sortie des commandes. Installez Terminal depuis le registre VLLNT UI avec la CLI shadcn.
1 storyTimeline
Chronologie verticale ou horizontale d'evenements sequentiels avec statuts termine/actif/a venir et lignes de connexion. Installez Timeline depuis le registre VLLNT UI avec la CLI shadcn.
4 storiesTLDR Section
Section de resume pour un apercu rapide du contenu. Installez TLDR Section depuis le registre VLLNT UI avec la CLI shadcn.
1 storyVideo Embed
Integration video responsive pour YouTube et d'autres fournisseurs. Installez Video Embed depuis le registre VLLNT UI avec la CLI shadcn.
1 storyCanvas Inspectors
Right-dock inspector panels for canvas objects — property grids, relationships, routing, and runtime overviews.
Object Card
Vue d'objet durable pour les agents, les executions, les artefacts et les taches dans le canvas. Installez Object Card depuis le registre VLLNT UI avec la CLI shadcn.
1 storyObject Inspector
En-tete de detail ancre a droite — pastille de type, point de statut, titre/sous-titre, avec emplacements de sections de proprietes. Installez Object Inspector depuis le registre VLLNT UI avec la CLI shadcn.
4 storiesPolicy Delivery Panel
Panneau ancre a droite listant les politiques et garde-fous actifs pour la route ou l'execution. Installez Policy Delivery Panel depuis le registre VLLNT UI avec la CLI shadcn.
4 storiesProperty Section
Grille cle/valeur compacte pour les panneaux d'inspection : etiquettes, sous-etiquettes, repli optionnel. Installez Property Section depuis le registre VLLNT UI avec la CLI shadcn.
4 storiesRelationship Inspector
Panneau ancre a droite listant les liens entrants et sortants de l'objet du canvas cible. Installez Relationship Inspector depuis le registre VLLNT UI avec la CLI shadcn.
4 storiesRouting Assignment Panel
Panneau ancre a droite listant les emplacements d'agents vers lesquels une route active repartit. Installez Routing Assignment Panel depuis le registre VLLNT UI avec la CLI shadcn.
4 storiesRuntime Overview Panel
Grille de tuiles recapitulative en haut du dock pour l'etat d'execution lorsqu'aucun objet du canvas n'est selectionne. Installez Runtime Overview Panel depuis le registre VLLNT UI avec la CLI shadcn.
4 storiesAccount & Billing Badges
Account and billing status components — plan, role, and credit badges plus subscription and wallet cards.
Credit Badge
Pastille de statut de solde pour les credits, les etats de portefeuille et la sante de facturation. Installez Credit Badge depuis le registre VLLNT UI avec la CLI shadcn.
2 storiesPlan Badge
Indicateur de niveau d'abonnement pour la tarification, la facturation et les recapitulatifs de compte. Installez Plan Badge depuis le registre VLLNT UI avec la CLI shadcn.
3 storiesRole Badge
Indicateur de role de compte pour proprietaires, administrateurs, membres et contacts de facturation. Installez Role Badge depuis le registre VLLNT UI avec la CLI shadcn.
2 storiesSubscription Card
Carte de statut et de gestion d'abonnement pour les details du forfait, du renouvellement et de l'utilisation. Installez Subscription Card depuis le registre VLLNT UI avec la CLI shadcn.
2 storiesWallet Card
Carte d'affichage du solde de credits pour les details de disponibilite, d'attente et de rechargement. Installez Wallet Card depuis le registre VLLNT UI avec la CLI shadcn.
2 storiesLisible 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's in the content family?
- Layout and presentation components — bento grids, cards, testimonials, marquees, expandable panels, timelines, and text-reveal effects — for marketing and editorial surfaces.