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