MUI Storybook

A comprehensive Storybook showcase for MUI v7 components with React 19.

Features

Feature	Description
51 Components	Complete MUI component coverage
Theme Switching	Light/dark mode via toolbar
Interaction Tests	Automated UI testing with play functions
A11y Testing	axe-playwright accessibility checks
Design Tokens	Comprehensive token documentation
Real-World Examples	Dashboard, Payment, Mobile Landing

Tech Stack

Technology	Version
React	19.2.1
MUI	7.3.5
Storybook	10.1.4
TypeScript	5.9.3
Vite	6.3.5

Installation (Storybook Composition)

Add to your .storybook/main.ts:

export default {
  refs: {
    'mui-storybook': {
      title: "MUI Storybook",
      url: "https://main--632a01c394385880b3383063.chromatic.com/",
    }
  },
}

Then start your Storybook - MUI Storybook will appear in your sidebar.

MCP Integration (AI Assistants)

Enable AI assistants (Claude, Cursor, VS Code Copilot) to access component documentation via the Storybook MCP Server:

{
  "mcpServers": {
    "mui-storybook": {
      "command": "npx",
      "args": ["-y", "storybook-mcp@latest"],
      "env": {
        "STORYBOOK_URL": "https://main--632a01c394385880b3383063.chromatic.com/index.json"
      }
    }
  }
}

This provides:

• getComponentList - List all available components
• getComponentsProps - Get detailed props information

For CUSTOM_TOOLS configuration and IDE-specific setup, see MCP Integration Guide.

Local Development

git clone https://github.com/laststance/mui-storybook.git
cd mui-storybook
pnpm install
pnpm storybook    # Launch dev server on port 6006

Available Scripts

Command	Description
pnpm storybook	Start development server
pnpm build	Build static Storybook
pnpm gen <Name>	Generate component scaffold
pnpm lint	Run ESLint
pnpm typecheck	TypeScript validation
pnpm test-storybook	Run interaction tests
pnpm validate	Run all checks (lint, typecheck, build)

Contributing

1. Fork the repository and create your branch from main
2. Run pnpm install
3. Run pnpm storybook
4. Generate new component: pnpm gen <ComponentName>
5. Run pnpm validate before submitting PR

$ pnpm gen Paper
✔  ++ /src/components/Paper/Paper.tsx
✔  ++ /src/components/Paper/Paper.stories.tsx

License

MIT

Contributors

Thanks to all contributors! (emoji key)

ryota-murakami 💻 📖 ⚠️

This project follows the all-contributors specification. Contributions of any kind welcome!