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.

Supported platforms:WebNative
1 storyView component

Animated List

List whose items animate in sequentially with a staggered entrance. Install Animated List from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Animated Testimonials

Testimonial carousel with animated transitions between quotes. Install Animated Testimonials from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Bento Grid

Responsive bento-style grid layout with feature cards. Install Bento Grid from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
1 storyView component

Blog Card

Card layout for displaying blog post previews. Install Blog Card from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
1 storyView component

Card

Container with header, content, and footer sections. Install Card from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Carousel

Scrollable content carousel with navigation controls. Install Carousel from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Collapsible

Expandable and collapsible content section. Install Collapsible from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Expandable Cards

Cards that expand on click to reveal additional content. Install Expandable Cards from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

FAQ

Frequently asked questions section with expandable answers. Install FAQ from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Slideshow

Step-through slideshow for presenting content sequentially. Install Slideshow from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Text 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.

Supported platforms:WebNative
2 storiesView component

Reveal 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.

Supported platforms:WebNative
3 storiesView component

Scramble Text

Scrambles characters then resolves them into the final text. Install Scramble Text from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Shimmer Text

Text with a bright light band that sweeps across it. Install Shimmer Text from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Spinning Text

Text laid out in a circle that rotates continuously. Install Spinning Text from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Text Animate

Animates text in by word or character with configurable effects. Install Text Animate from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
4 storiesView component

Text Reveal

Dims and brightens words as the text scrolls through the viewport. Install Text Reveal from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Text Shimmer

Text with an animated gradient fill that shimmers. Install Text Shimmer from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Typewriter

Types text out character by character with a blinking cursor. Install Typewriter from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
3 storiesView component

Article & 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.

Supported platforms:WebNative
1 storyView component

Code Block

Syntax-highlighted code display with copy support. Install Code Block from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Code Playground

Interactive code editor with live preview. Install Code Playground from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
2 storiesView component

Content Intro

Introductory section for content pages with title and description. Install Content Intro from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Document 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.

Supported platforms:WebNative
6 storiesView component

MDX Content

Renders MDX content with component mapping. Install MDX Content from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
1 storyView component

Share Section

Social sharing buttons and link copy section. Install Share Section from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Terminal

Terminal-style display for command output. Install Terminal from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Timeline

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.

Supported platforms:Web
4 storiesView component

TLDR Section

Summary section for quick content overview. Install TLDR Section from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
1 storyView component

Video Embed

Responsive video embed for YouTube and other providers. Install Video Embed from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
1 storyView component

Canvas 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.

Supported platforms:Web
1 storyView component

Object 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.

Supported platforms:Web
4 storiesView component

Policy 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.

Supported platforms:Web
4 storiesView component

Property Section

Compact key/value grid for inspector panels — labels, sublabels, optional collapse. Install Property Section from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
4 storiesView component

Relationship 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.

Supported platforms:Web
4 storiesView component

Routing 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.

Supported platforms:Web
4 storiesView component

Runtime 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.

Supported platforms:Web
4 storiesView component

Account & 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.

Supported platforms:WebNative
2 storiesView component

Plan Badge

Subscription tier indicator for pricing, billing, and account summaries. Install Plan Badge from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
3 storiesView component

Role Badge

Account role indicator for owners, admins, members, and billing contacts. Install Role Badge from the VLLNT UI registry with the shadcn CLI.

Supported platforms:WebNative
2 storiesView component

Subscription Card

Subscription status and management card for plan, renewal, and usage details. Install Subscription Card from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
2 storiesView component

Wallet Card

Credit balance display card for available, pending, and refresh details. Install Wallet Card from the VLLNT UI registry with the shadcn CLI.

Supported platforms:Web
2 storiesView component

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.