Content components
Layout and content primitives for presenting rich information.
43 components
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 storyBlur Reveal
Reveals content with a blur-to-sharp transition when it scrolls into view.
2 storiesCallout
Highlighted content block with variant styles for info, warning, danger, and more.
1 storyCard
Container with header, content, and footer sections.
1 storyCarousel
Scrollable content carousel with navigation controls.
1 storyCode Block
Syntax-highlighted code display with copy support.
1 storyCode Playground
Interactive code editor with live preview.
2 storiesCollapsible
Expandable and collapsible content section.
1 storyContent Intro
Introductory section for content pages with title and description.
2 storiesCredit Badge
Balance status pill for credits, wallet states, and billing health.
2 storiesDocument Sibling Nav
Newer/older navigator: links to the previous and next item in an ordered series.
6 storiesExpandable Cards
Cards that expand on click to reveal additional content.
1 storyFAQ
Frequently asked questions section with expandable answers.
2 storiesMDX Content
Renders MDX content with component mapping.
1 storyObject 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 storiesPlan Badge
Subscription tier indicator for pricing, billing, and account summaries.
3 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 storiesReveal Text
Reveals text with a directional slide-and-fade when it enters the viewport.
3 storiesRole Badge
Account role indicator for owners, admins, members, and billing contacts.
2 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 storiesScramble Text
Scrambles characters then resolves them into the final text.
2 storiesShare Section
Social sharing buttons and link copy section.
2 storiesShimmer Text
Text with a bright light band that sweeps across it.
2 storiesSlideshow
Step-through slideshow for presenting content sequentially.
2 storiesSpinning Text
Text laid out in a circle that rotates continuously.
2 storiesSubscription Card
Subscription status and management card for plan, renewal, and usage details.
2 storiesTerminal
Terminal-style display for command output.
1 storyText 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 storiesTimeline
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 storyTypewriter
Types text out character by character with a blinking cursor.
3 storiesVideo Embed
Responsive video embed for YouTube and other providers.
1 storyWallet Card
Credit balance display card for available, pending, and refresh details.
2 stories