Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

storybook-solidjs-vite

solidjs-community36.9kMIT9.0.2TypeScript support: included

SolidJS integration with Storybook

storybook, solidjs, solid, storybook-addon, storybook-integration, component-library, ui-components, vite, solid-vite, solid-storybook, frontend, javascript, typescript

readme

Storybook for SolidJS

Storybook SolidJS Vite

npm version npm downloads MIT License PRs Welcome

Community supported Storybook framework adapter for SolidJS, using Vite as the bundler.


📋 Table of Contents


✨ Features

  • Fast Vite-powered — Lightning-fast Storybook experience using Vite.
  • SolidJS Native — Out-of-the-box support for Solid components and JSX.
  • Latest Storybook Support — Built for and tested with the newest Storybook version.
  • TypeScript-First — Full TypeScript support for your components and stories.
  • Addon Ecosystem — Works with popular Storybook addons (Docs, Controls, Actions, Links, etc.).
  • ArgTypes from TypeScript — Prop tables and controls generated directly from your TypeScript types.
  • Integrated Testing — Built-in support for component and story testing with Vitest and Playwright.
  • Hot Reload — Instant updates as you edit components, powered by Vite.
  • MDX & Docs — Write rich documentation alongside your stories using MDX.
  • Accessibility (a11y) — Built-in accessibility checks for your components.

🚀 Getting Started

The fastest way to start using Storybook with SolidJS:

npx create-solid-storybook <folder-name>

Replace <folder-name> with your desired project directory name. This will generate a SolidJS project pre-configured with Storybook 9 and all essential addons.

Then run:

cd <folder-name>
npm run storybook

Open the provided URL in your browser to view your Storybook instance.


📦 Manual Installation

You can set everything up manually. To do this:

  1. Copy the following files from storybook-solid-template to your project:

  2. .storybook/**

  3. vitest.config.ts

  4. Install the required dependencies:

npm install storybook storybook-solidjs-vite @chromatic-com/storybook @storybook/addon-onboarding @storybook/addon-docs @storybook/addon-a11y @storybook/addon-links @storybook/addon-vitest @vitest/coverage-v8 playwright vitest @vitest/browser
  1. Add the necessary scripts to your package.json:
"scripts": {
  "build": "storybook build",
  "storybook": "storybook dev -p 6006"
}
  1. Create your stories in stories/ (or use examples from the template's stories folder)

  2. Start Storybook:

npm run storybook

⚙️ Configuration

  • You can customize Vite and Storybook as usual. For advanced configuration, see the Storybook Vite docs.
  • Add your stories in src/**/*.stories.tsx or src/**/*.stories.js.
  • Use Storybook Addons for extra features.

🤝 Contributing

Contributions, issues and feature requests are welcome! Feel free to open an issue or submit a PR.


👤 Maintainer

@kachurun's avatar

Maintained with ❤️ by @kachurun


📖 License

MIT

changelog

storybook-solidjs-vite

9.0.2

Patch Changes

  • 7cd5760: chore: cleanup deps

9.0.1

Patch Changes

  • 3d0c18d: fix: ensure @storybook/builder-vite is required properly to prevent missing module error in yarn setups

9.0.0

Minor Changes

  • a47cdca: Storybook v9 Support