VLLNT UI · Component family
Content components
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. Install Accordion from the VLLNT UI registry with the shadcn CLI.
1 storyAnimated List
List whose items animate in sequentially with a staggered entrance. Install Animated List from the VLLNT UI registry with the shadcn CLI.
1 storyAnimated Testimonials
Testimonial carousel with animated transitions between quotes. Install Animated Testimonials from the VLLNT UI registry with the shadcn CLI.
2 storiesBento Grid
Responsive bento-style grid layout with feature cards. Install Bento Grid from the VLLNT UI registry with the shadcn CLI.
1 storyBlog Card
Card layout for displaying blog post previews. Install Blog Card from the VLLNT UI registry with the shadcn CLI.
1 storyCard
Container with header, content, and footer sections. Install Card from the VLLNT UI registry with the shadcn CLI.
1 storyCarousel
Scrollable content carousel with navigation controls. Install Carousel from the VLLNT UI registry with the shadcn CLI.
1 storyCollapsible
Expandable and collapsible content section. Install Collapsible from the VLLNT UI registry with the shadcn CLI.
1 storyExpandable Cards
Cards that expand on click to reveal additional content. Install Expandable Cards from the VLLNT UI registry with the shadcn CLI.
1 storyFAQ
Frequently asked questions section with expandable answers. Install FAQ from the VLLNT UI registry with the shadcn CLI.
2 storiesSlideshow
Step-through slideshow for presenting content sequentially. Install Slideshow from the VLLNT UI registry with the shadcn CLI.
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. Install Blur Reveal from the VLLNT UI registry with the shadcn CLI.
2 storiesReveal Text
Reveals text with a directional slide-and-fade when it enters the viewport. Install Reveal Text from the VLLNT UI registry with the shadcn CLI.
3 storiesScramble Text
Scrambles characters then resolves them into the final text. Install Scramble Text from the VLLNT UI registry with the shadcn CLI.
2 storiesShimmer Text
Text with a bright light band that sweeps across it. Install Shimmer Text from the VLLNT UI registry with the shadcn CLI.
2 storiesSpinning Text
Text laid out in a circle that rotates continuously. Install Spinning Text from the VLLNT UI registry with the shadcn CLI.
2 storiesText Animate
Animates text in by word or character with configurable effects. Install Text Animate from the VLLNT UI registry with the shadcn CLI.
4 storiesText Reveal
Dims and brightens words as the text scrolls through the viewport. Install Text Reveal from the VLLNT UI registry with the shadcn CLI.
1 storyText Shimmer
Text with an animated gradient fill that shimmers. Install Text Shimmer from the VLLNT UI registry with the shadcn CLI.
2 storiesTypewriter
Types text out character by character with a blinking cursor. Install Typewriter from the VLLNT UI registry with the shadcn CLI.
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. Install Callout from the VLLNT UI registry with the shadcn CLI.
1 storyCode Block
Syntax-highlighted code display with copy support. Install Code Block from the VLLNT UI registry with the shadcn CLI.
1 storyCode Playground
Interactive code editor with live preview. Install Code Playground from the VLLNT UI registry with the shadcn CLI.
2 storiesContent Intro
Introductory section for content pages with title and description. Install Content Intro from the VLLNT UI registry with the shadcn CLI.
2 storiesDocument Sibling Nav
Newer/older navigator: links to the previous and next item in an ordered series. Install Document Sibling Nav from the VLLNT UI registry with the shadcn CLI.
6 storiesMDX Content
Renders MDX content with component mapping. Install MDX Content from the VLLNT UI registry with the shadcn CLI.
1 storyShare Section
Social sharing buttons and link copy section. Install Share Section from the VLLNT UI registry with the shadcn CLI.
2 storiesTerminal
Terminal-style display for command output. Install Terminal from the VLLNT UI registry with the shadcn CLI.
1 storyTimeline
Vertical or horizontal timeline of sequential events with completed/active/upcoming statuses and connector lines. Install Timeline from the VLLNT UI registry with the shadcn CLI.
4 storiesTLDR Section
Summary section for quick content overview. Install TLDR Section from the VLLNT UI registry with the shadcn CLI.
1 storyVideo Embed
Responsive video embed for YouTube and other providers. Install Video Embed from the VLLNT UI registry with the shadcn CLI.
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. Install Object Card from the VLLNT UI registry with the shadcn CLI.
1 storyObject Inspector
Right-dock detail header — kind chip, status dot, title/subtitle, with property-section slots. Install Object Inspector from the VLLNT UI registry with the shadcn CLI.
4 storiesPolicy Delivery Panel
Right-dock panel listing policies / guardrails active for the route or run. Install Policy Delivery Panel from the VLLNT UI registry with the shadcn CLI.
4 storiesProperty Section
Compact key/value grid for inspector panels — labels, sublabels, optional collapse. Install Property Section from the VLLNT UI registry with the shadcn CLI.
4 storiesRelationship Inspector
Right-dock panel listing inbound + outbound edges of the focused canvas object. Install Relationship Inspector from the VLLNT UI registry with the shadcn CLI.
4 storiesRouting Assignment Panel
Right-dock panel listing the agent slots an active route dispatches to. Install Routing Assignment Panel from the VLLNT UI registry with the shadcn CLI.
4 storiesRuntime Overview Panel
Top-of-dock summary tile grid for runtime health when no canvas object is selected. Install Runtime Overview Panel from the VLLNT UI registry with the shadcn CLI.
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. Install Credit Badge from the VLLNT UI registry with the shadcn CLI.
2 storiesPlan Badge
Subscription tier indicator for pricing, billing, and account summaries. Install Plan Badge from the VLLNT UI registry with the shadcn CLI.
3 storiesRole Badge
Account role indicator for owners, admins, members, and billing contacts. Install Role Badge from the VLLNT UI registry with the shadcn CLI.
2 storiesSubscription Card
Subscription status and management card for plan, renewal, and usage details. Install Subscription Card from the VLLNT UI registry with the shadcn CLI.
2 storiesWallet Card
Credit balance display card for available, pending, and refresh details. Install Wallet Card from the VLLNT UI registry with the shadcn CLI.
2 storiesReadable by agents
Your AI agent can install these too.
The registry is exposed as structured data, so coding agents pick the right component without scraping HTML.
Frequently asked
- 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.