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
Collapsible content sections supporting single or multiple open items.
1 storyAnimated List
List whose items animate in sequentially with a staggered entrance.
1 storyAnimated Testimonials
Testimonial carousel with animated transitions between quotes.
2 storiesBento Grid
Responsive bento-style grid layout with feature cards.
1 storyBlog Card
Card layout for displaying blog post previews.
1 storyCard
Container with header, content, and footer sections.
1 storyCarousel
Scrollable content carousel with navigation controls.
1 storyCollapsible
Expandable and collapsible content section.
1 storyExpandable Cards
Cards that expand on click to reveal additional content.
1 storyFAQ
Frequently asked questions section with expandable answers.
2 storiesSlideshow
Step-through slideshow for presenting content sequentially.
2 storiesText Effects
Animated text effect components for React — blur, shimmer, scramble, typewriter, and scroll-reveal typography.
Blur Reveal
Reveals content with a blur-to-sharp transition when it scrolls into view.
2 storiesReveal Text
Reveals text with a directional slide-and-fade when it enters the viewport.
3 storiesScramble Text
Scrambles characters then resolves them into the final text.
2 storiesShimmer Text
Text with a bright light band that sweeps across it.
2 storiesSpinning Text
Text laid out in a circle that rotates continuously.
2 storiesText Animate
Animates text in by word or character with configurable effects.
4 storiesText Reveal
Dims and brightens words as the text scrolls through the viewport.
1 storyText Shimmer
Text with an animated gradient fill that shimmers.
2 storiesTypewriter
Types text out character by character with a blinking cursor.
3 storiesArticle & Media Blocks
Content blocks for articles and docs — code blocks, callouts, video embeds, timelines, and MDX rendering.
Callout
Highlighted content block with variant styles for info, warning, danger, and more.
1 storyCode Block
Syntax-highlighted code display with copy support.
1 storyCode Playground
Interactive code editor with live preview.
2 storiesContent Intro
Introductory section for content pages with title and description.
2 storiesDocument Sibling Nav
Newer/older navigator: links to the previous and next item in an ordered series.
6 storiesMDX Content
Renders MDX content with component mapping.
1 storyShare Section
Social sharing buttons and link copy section.
2 storiesTerminal
Terminal-style display for command output.
1 storyTimeline
Vertical or horizontal timeline of sequential events with completed/active/upcoming statuses and connector lines.
4 storiesTLDR Section
Summary section for quick content overview.
1 storyVideo Embed
Responsive video embed for YouTube and other providers.
1 storyCanvas Inspectors
Right-dock inspector panels for canvas objects — property grids, relationships, routing, and runtime overviews.
Object Card
Durable object view for agents, runs, artifacts, and tasks inside the canvas.
1 storyObject Inspector
Right-dock detail header — kind chip, status dot, title/subtitle, with property-section slots.
4 storiesPolicy Delivery Panel
Right-dock panel listing policies / guardrails active for the route or run.
4 storiesProperty Section
Compact key/value grid for inspector panels — labels, sublabels, optional collapse.
4 storiesRelationship Inspector
Right-dock panel listing inbound + outbound edges of the focused canvas object.
4 storiesRouting Assignment Panel
Right-dock panel listing the agent slots an active route dispatches to.
4 storiesRuntime Overview Panel
Top-of-dock summary tile grid for runtime health when no canvas object is selected.
4 storiesAccount & Billing Badges
Account and billing status components — plan, role, and credit badges plus subscription and wallet cards.
Credit Badge
Balance status pill for credits, wallet states, and billing health.
2 storiesPlan Badge
Subscription tier indicator for pricing, billing, and account summaries.
3 storiesRole Badge
Account role indicator for owners, admins, members, and billing contacts.
2 storiesSubscription Card
Subscription status and management card for plan, renewal, and usage details.
2 storiesWallet Card
Credit balance display card for available, pending, and refresh details.
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.