Interactive Component Demos

Interactive Component Demos

This page demonstrates the Storybook iframe embed component for displaying live, interactive component demos within the documentation site.

Button Component Demo

Here’s a live Button component from our Storybook:

Loading Storybook story...

Button with Controls Panel

The same Button component with the Storybook controls panel enabled:

Loading Storybook story...

Form Component Demo

Interactive form component demonstration:

Loading Storybook story...

Theme Demo

Theme switching demonstration:

Loading Storybook story...

Features

The Storybook embed component provides:

• Live Interaction: Full interactive functionality of components
• Responsive Design: Adapts to different screen sizes
• Loading States: Shows loading placeholder while iframe loads
• Error Handling: Graceful fallback when Storybook is unavailable
• Accessibility: Proper ARIA labels and keyboard navigation
• Customizable: Configurable height, width, toolbar, and panel visibility
• No JavaScript Fallback: Links directly to Storybook when JS is disabled

Usage

Import the Astro component and use it in your documentation:

---
import StorybookEmbedAstro from '../components/interactive/StorybookEmbedAstro.astro'
---

<StorybookEmbedAstro
  storyId="components-button--primary"
  title="Button Demo"
  height={350}
  showPanel={true}
/>

Configuration Options

| Prop | Type | Default | Description | |------|------|---------|-------------| | storyId | string | required | Storybook story ID (e.g., ‘components-button—primary’) | | storybookUrl | string | 'http://localhost:6006' | Base URL for Storybook instance | | height | number | 400 | Height of iframe in pixels | | width | string \| number | '100%' | Width of iframe | | showToolbar | boolean | false | Show Storybook toolbar | | showPanel | boolean | false | Show controls/docs panel | | title | string | auto-generated | Accessibility title | | class | string | '' | Additional CSS classes |