Storybook

Explore and interact with mdxui components in our comprehensive Storybook playground. All components are documented with live examples, props, variants, and accessibility features.

What is Storybook?

Storybook is an interactive development environment for UI components. It provides:

Live Component Preview - See components in isolation with real-time updates
Props Explorer - Interact with component props to see behavior changes
Variant Showcase - View all visual variants and states
Documentation - Detailed usage examples and API documentation
Accessibility Testing - Built-in accessibility checks and keyboard navigation
Responsive Testing - Test components at different viewport sizes

Quick Start

Local Development

Start Storybook on your local machine:

pnpm storybook

Opens at localhost:6006

Production

Visit the live Storybook deployment:

storybook.mdxui.dev

Component Organization

mdxui components are organized into four main categories:

Primitives

Core UI building blocks used by all templates. Over 60+ components including:

Form controls (Input, Select, Checkbox, etc.)
Layout primitives (Card, Sidebar, Dashboard Shell)
Navigation (Navigation Menu, Breadcrumb, Tabs)
Overlays (Dialog, Drawer, Popover, Tooltip)
Data display (Table, Chart, Calendar, Avatar)

Explore Primitives →

Widgets

Complex, feature-rich components built on primitives:

ChatBox - AI chat interface
Editor - Code and text editing
SearchBox - Advanced search
Onboarding - Multi-step wizards
Command Palette - Quick actions

Site Components (Beacon)

Marketing and content components implementing the SiteComponents interface:

Hero sections
Feature showcases
Pricing tables
Testimonials
CTA sections
Page templates

App Components (Cockpit)

Dashboard and authenticated app components implementing the AppComponents interface:

Developer Dashboard
API Key Manager
Team Manager
Settings Pages
Team Switcher

Browse Component Catalog →

Embedded Storybook (Coming Soon)

We're working on embedding Storybook directly in the docs for seamless exploration:

<StorybookEmbed story="primitives-button--primary" />

For now, use the local development server or production deployment to explore components interactively.

Using Components

All Storybook examples show how to import and use components:

Example: Button Component

import { Button } from '@mdxui/primitives'

export function MyComponent() {
  return (
    <Button variant="default" size="md">
      Click me
    </Button>
  )
}

Example: Card Component

import { Card, CardHeader, CardTitle, CardContent } from '@mdxui/primitives'

export function MyCard() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
      </CardHeader>
      <CardContent>
        Card content goes here
      </CardContent>
    </Card>
  )
}