Development
PopularPlugin
storybook
Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
Plugin Signal89/100Strong
maintained100
capable64
documented100
adopted100
Install on Claude Code
> /plugin marketplace add storybookjs/storybook> /plugin install storybook@storybook
Stats
90,797
Stars
10,378
Forks
Active
Maintenance
TypeScript
Language
MIT
License
6h ago
Last commit
10y ago
Created
Repo: storybookjs/storybook
What's inside
Skills
20/canary@../../../.agents/skills/canary/SKILL.md/docs-review@../../../.agents/skills/docs-review/SKILL.md/fix-linting-types-on-pr@../../../.agents/skills/fix-linting-types-on-pr/SKILL.md/github-qa-labels@../../../.agents/skills/github-qa-labels/SKILL.md/handle-pr-comments@../../../.agents/skills/handle-pr-comments/SKILL.md/minor-release@../../../.agents/skills/minor-release/SKILL.md
Show all 20 skillsShow fewer
/open-pr@../../../.agents/skills/open-pr/SKILL.md/pr@../../../.agents/skills/pr/SKILL.md/rebuild-restart-storybook@../../../.agents/skills/rebuild-restart-storybook/SKILL.md/storybook-startup-benchmark@../../../.agents/skills/storybook-startup-benchmark/SKILL.md/storybook-upgrade@../../../.agents/skills/storybook-upgrade/SKILL.md/update-pr-description@../../../.agents/skills/update-pr-description/SKILL.md/storiesInvoke FIRST, before creating, editing, or deleting components, stories, styles, CSS, themes, colors, or design tokens — anything that changes how the UI looks, no exceptions. Also for starting or previewing Storybook to verify UI, requests to show, browse, or list components,/storybook-initUse when adding Storybook to a project that does not have Storybook configured yet./storybook-setupUse this skill when Storybook is already installed and the user wants a working `preview` file and stories for real components./storybook-upgradeUse this skill when Storybook exists but needs an upgrade./initUse when adding Storybook to a project that does not have Storybook configured yet./setupUse this skill when Storybook is already installed and the user wants a working `preview` file and stories for real components./storiesInvoke FIRST, before creating, editing, or deleting components, stories, styles, CSS, themes, colors, or design tokens — anything that changes how the UI looks, no exceptions. Also for starting or previewing Storybook to verify UI, requests to show, browse, or list components,/upgradeUse this skill when Storybook exists but needs an upgrade.
Badges
1
README
1Table of contents
- 🚀 Getting Started
- 📒 Projects
- 🛠 Supported Frameworks & Examples
- 🔗Addons
- 🏅 Badges & Presentation materials
- 👥 Community
- 👏 Contributing
- 👨💻 Development scripts
- 💸 Sponsors
- 💵 Backers
- :memo: License
Getting Started
Visit Storybook's website to learn more about Storybook and to get started.
Documentation
Documentation can be found on Storybook's docs site.
Examples
View Component Encyclopedia to see how leading teams use Storybook.
Use storybook.new to quickly create an example project in Stackblitz.
Storybook comes with a lot of addons for component design, documentation, testing, interactivity, and so on. Storybook's API makes it possible to configure and extend in various ways. It has even been extended to support React Native, Android, iOS, and Flutter development for mobile.
Community
For additional help, share your issue in the repo's GitHub Discussions.
Projects
Supported Frameworks
| Renderer | Demo | |
|---|---|---|
| React |  |  |
| Angular |  |  |
| Vue 3 |  |  |
| Web components |  |  |
| React Native |  |  |
| HTML |  |  |
| Ember |  |  |
| Svelte |  |  |
| Preact |  |  |
| Qwik |  |  |
| SolidJS |  |  |
| Android, iOS, Flutter |  |  |
Addons
| Addons | |
|---|---|
| a11y | Test components for user accessibility in Storybook |
| actions | Log actions as users interact with components in the Storybook UI |
| backgrounds | Let users choose backgrounds in the Storybook UI |
| cssresources | Dynamically add/remove CSS resources to the component iframe |
| design assets | View images, videos, and weblinks alongside your story |
| docs | Add high quality documentation to your components |
| events | Interactively fire events to components that respond to EventEmitter |
| google-analytics | Reports google analytics on stories |
| graphql | Query a GraphQL server within Storybook stories |
| jest | View the results of components' unit tests in Storybook |
| links | Create links between stories |
| measure | Visually inspect the layout and box model within the Storybook UI |
| outline | Visually debug the CSS layout and alignment within the Storybook UI |
| query params | Mock query params |
| viewport | Change display sizes and layouts for responsive components using Storybook |
See Addon / Framework Support Table
To continue improving your experience, we have to eventually deprecate or remove certain addons in favor of new and better tools.
If you're using info/notes, we highly recommend you migrate to docs instead, and here is a guide to help you.
If you're using contexts, we highly recommend you migrate to toolbars and here is a guide to help you.
If you're using addon-storyshots, we highly recommend you migrate to the Storybook test-runner and here is a guide to help you.
Badges & Presentation materials
We have a badge! Link it to your live Storybook example.
[](link to site)
If you're looking for material to use in your Storybook presentation, such as logos, video material, and the colors we use, you can find it all on our brand repo.
Community
- Tweeting via @storybookjs
- Blogging at storybook.js.org and Medium
- Chatting on Discord
- Videos and streams at YouTube
Contributing
Contributions to Storybook are always welcome!
- 📥 Pull requests and 🌟 Stars are always welcome.
- Read our contributing guide to get started, or find us on Discord, we will take the time to guide you.
Looking for a first issue to tackle?
- We tag issues with
when we think they are well suited for people who are new to the codebase or OSS in general. - Talk to us, we'll find something that suits your skills and learning interests.
Development scripts
Storybook is organized as a monorepo. Useful scripts include:
yarn start
Runs a sandbox template storybook with test stories
yarn task
As above, but gives you options to customize the sandbox (e.g. selecting other frameworks)
yarn lint
boolean check if code conforms to linting rules - uses remark & eslint
yarn lint:js- will check jsyarn lint:md- will check markdown + code samplesyarn lint:js --fix- will automatically fix js
yarn test
boolean check if unit tests all pass - uses jest
yarn run test --core --watch- will run core tests in watch-mode
Sponsors
Become a sponsor to have your logo and website URL on our README on Github. [Become a sponsor]
Backers
By making a recurring donation, you can support us and our work. [Become a backer]
License
-the end-
File tree
1585storybookjs/storybookView on GitHub
.agents/
plugins/
marketplace.json
skills/
canary/
SKILL.md
docs-review/
references/
docs-antipatterns.md
docs-principles.md
docs-strategy.md
storybook-style.md
SKILL.md
fix-linting-types-on-pr/
SKILL.md
github-qa-labels/
SKILL.md
handle-pr-comments/
SKILL.md
minor-release/
get-minor-changelog-summary.ts
SKILL.md
write-minor-changelog-section.ts
open-pr/
scripts/
detect-base-branch.sh
SKILL.md
pr/
SKILL.md
rebuild-restart-storybook/
SKILL.md
storybook-startup-benchmark/
SKILL.md
storybook-upgrade/
SKILL.md
update-pr-description/
SKILL.md
.circleci/
config.yml
.claude/
.claude-plugin/
marketplace.json
skills/
canary/
SKILL.md
docs-review/
SKILL.md
fix-linting-types-on-pr/
SKILL.md
github-qa-labels/
SKILL.md
handle-pr-comments/
SKILL.md
minor-release/
SKILL.md
open-pr/
SKILL.md
pr/
SKILL.md
rebuild-restart-storybook/
SKILL.md
storybook-startup-benchmark/
SKILL.md
storybook-upgrade/
SKILL.md
update-pr-description/
SKILL.md
.codex/
environments/
environment.toml
.cursor/
mcp.json
rules/
cursor-cloud.mdc
spy-mocking.mdc
.cursorrules
.editorconfig
.env
.git-blame-ignore-revs
.gitattributes
.github/
actions/
setup-node-and-install/
action.yml
comments/
good-first-issue.md
invalid-link.md
copilot-mcp.json
DISCUSSION_TEMPLATE/
help.yml
ideas.yml
rfc.yml
FUNDING.yml
ISSUE_TEMPLATE/
bug_report.yml
config.yml
tracking_issue.yml
update_docs.yml
PULL_REQUEST_TEMPLATE.md
scripts/
agent-scan-check-org-membership.mjs
agent-scan-label-pr.mjs
package.json
workflows/
agent-eval.yml
agent-scan.yml
claude-code-review.yml
claude.yml
copilot-setup-steps.yml
danger-js.yml
fork-checks.yml
generate-sandboxes.yml
handle-release-branches.yml
nx.yml
prepare-non-patch-release.yml
prepare-patch-release.yml
publish.yml
shared/
mood.md
reporting.md
stale.yml
triage.yml
trigger-circle-ci-workflow.yml
zizmor.yml
.gitignore
.husky/
post-checkout
pre-commit
.lintstagedrc.mjs
.mailmap
.nvmrc
.nx/
workflows/
agents.yaml
distribution-config-daily.yaml
distribution-config.yaml
.oxfmtrc.json
.oxlintrc.json
.spelling
.vscode/
extensions.json
launch.json
settings.json
.yarn/
patches/
@7rulnik-react-element-to-jsx-string-npm-15.0.1-e53b67c4b3.patch
@testing-library-user-event-npm-14.6.1-5da7e1d4e2.patch
@types-babel__traverse-npm-7.20.6-fac4243243.patch
@vercel-agent-eval-npm-1.2.0-861deb21a0.patch
@vitest-expect-npm-3.2.4-97c526d5cc.patch
react-aria-components-npm-1.12.2-6c5dcdafab.patch
releases/
yarn-4.18.0.cjs
.yarnrc.yml
agent-eval/
.env.example
.gitignore
app/
compare/
page.tsx
evals/
[name]/
page.tsx
page.tsx
experiments/
[name]/
[timestamp]/
page.tsx
page.tsx
page.tsx
globals.css
layout.tsx
page.tsx
transcript/
[experiment]/
[timestamp]/
[evalName]/
[run]/
page.tsx
eval-matchers.d.ts
eval.d.ts
evals/
801-create-component-no-launch-config/
.claude/
launch.json
EVAL.ts
package.json
PROMPT.md
802-create-component/
EVAL.ts
package.json
PROMPT.md
803-edit-component/
EVAL.ts
package.json
PROMPT.md
src/
components/
ReviewCard.tsx
stories/
ReviewCard.stories.tsx
804-write-story-for-existing-component/
EVAL.ts
package.json
PROMPT.md
src/
components/
AlertBanner.tsx
ReviewCard.tsx
stories/
ReviewCard.stories.tsx
805-non-visual-refactor/
EVAL.ts
package.json
PROMPT.md
src/
components/
ReviewCard.tsx
utils/
formatRating.ts
stories/
ReviewCard.stories.tsx
806-browse-request/
EVAL.ts
package.json
PROMPT.md
src/
components/
ReviewCard.tsx
stories/
ReviewCard.stories.tsx
807-docs-request/
EVAL.ts
package.json
PROMPT.md
src/
components/
ReviewCard.tsx
stories/
ReviewCard.stories.tsx
808-shared-infra-fallback/
EVAL.ts
package.json
PROMPT.md
src/
components/
Badge.tsx
StatusPill.tsx
theme/
colors.ts
stories/
Badge.stories.tsx
StatusPill.stories.tsx
810-fix-failing-tests/
EVAL.ts
package.json
PROMPT.md
src/
components/
Button.tsx
stories/
Button.stories.tsx
811-fix-a11y-violations/
EVAL.ts
package.json
PROMPT.md
src/
components/
Button.tsx
stories/
Button.stories.tsx
812-first-story-empty-project/
.claude/
launch.json
.storybook/
main.ts
preview.tsx
vitest.setup.ts
EVAL.ts
package.json
PROMPT.md
vitest.config.ts
vitest.storybook.config.ts
813-monorepo-leaf-create-component/
EVAL.ts
package.json
PROMPT.md
820-init-no-storybook/
EVAL.ts
package.json
PROMPT.md
821-upgrade-from-sb9/
.storybook/
main.ts
preview.ts
EVAL.ts
package.json
PROMPT.md
stories/
Button.stories.tsx
822-upgrade-from-stable/
.storybook/
main.ts
preview.ts
EVAL.ts
package.json
PROMPT.md
stories/
Button.stories.tsx
823-setup-outdated-storybook/
.storybook/
main.ts
preview.ts
EVAL.ts
package.json
PROMPT.md
stories/
Button.stories.tsx
901-create-component-atom-reshaped-concise/
EVAL.ts
package.json
PROMPT.md
901-create-component-atom-reshaped-detailed/
EVAL.ts
package.json
PROMPT.md
901-create-component-atom-reshaped-explicit-stories/
EVAL.ts
package.json
PROMPT.md
902-create-component-composite-reshaped-concise/
EVAL.ts
package.json
PROMPT.md
902-create-component-composite-reshaped-detailed/
EVAL.ts
package.json
PROMPT.md
902-create-component-composite-reshaped-explicit-stories/
EVAL.ts
package.json
PROMPT.md
903-create-component-async-fetch-reshaped-concise/
EVAL.ts
package.json
PROMPT.md
903-create-component-async-fetch-reshaped-detailed/
EVAL.ts
package.json
PROMPT.md
903-create-component-async-fetch-reshaped-explicit-stories/
EVAL.ts
package.json
PROMPT.md
904-create-component-async-module-reshaped-concise/
EVAL.ts
package.json
PROMPT.md
904-create-component-async-module-reshaped-detailed/
EVAL.ts
package.json
PROMPT.md
904-create-component-async-module-reshaped-explicit-stories/
EVAL.ts
package.json
PROMPT.md
905-existing-component-write-story-reshaped-concise/
EVAL.ts
package.json
PROMPT.md
src/
components/
AlertBanner.tsx
905-existing-component-write-story-reshaped-detailed/
EVAL.ts
package.json
PROMPT.md
src/
components/
AlertBanner.tsx
906-existing-component-edit-story-reshaped-concise/
EVAL.ts
package.json
PROMPT.md
src/
components/
PlanCard.tsx
stories/
PlanCard.stories.tsx
906-existing-component-edit-story-reshaped-detailed/
EVAL.ts
package.json
PROMPT.md
src/
components/
PlanCard.tsx
stories/
PlanCard.stories.tsx
907-existing-component-change-component-reshaped-concise/
EVAL.ts
... 1600 moreShowing a partial view of a very large repo.
FAQ
storybook is a Claude Code plugin with 20 hand-picked skills for development work, indexed on Flowy. Install it with the command on its page. It includes canary, docs-review, fix-linting-types-on-pr. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.
- What is storybook?
- Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
- How do I install storybook?
- Run these in Claude Code: /plugin marketplace add storybookjs/storybook then /plugin install storybook@storybook. Then prompt normally.
- Does storybook auto-invoke its skills?
- Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.
- Is storybook free?
- Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.