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