Storybook@storybookjs

Industry standard frontend workshop. Develop, test, and document components with ease. Open-source & maintained by @chromaticcom

 npx storybook@latest init
storybook.js.org/
Joined May 2017
1,553 Photos and videos
Load newest
🤖 Automated setup Get started in any React project by typing this into your agent of choice: > Set up Storybook for me with npm create storybook@latest and follow its instructions precisely It’ll add Storybook then write the necessary config and stories for you.
Terminal window displaying: Summary: - Ran `storybook init` (Storybook 10.4.0 + React/Vite framework, addons: vitest, a11y, docs, chromatic-com, mcp) - Ran `storybook ai setup` and followed its playbook - Installed MSW deps: `msw`, `msw-storybook-addon`, `mockdate`; ran `msw init ./public` - Configured `.storybook/main.ts` with staticDirs: `['../public']` - Built shared `.storybook/preview.tsx` with the real provider tree (MemoryRouter + Redux store + styled-components ThemeProvider + GlobalStyle), MSW loader, MockDate, and a #modal portal-root decorator - Wrote MSW handlers for mealdrop.netlify.app/.netlify/functions/restaurants (list + by-id) - Created 10 colocated `*.stories.tsx` files (Button, Badge, Heading, Body, Review, Logo, Spinner, TopBanner, ErrorBlock, RestaurantCard) — 37 stories total, plus matching names (Default, Disabled, New, Closed, Loading) that the pre-existing `.test.tsx` files compose - Included one CssCheck story on Button assert

ALT Terminal window displaying: Summary: - Ran `storybook init` (Storybook 10.4.0 + React/Vite framework, addons: vitest, a11y, docs, chromatic-com, mcp) - Ran `storybook ai setup` and followed its playbook - Installed MSW deps: `msw`, `msw-storybook-addon`, `mockdate`; ran `msw init ./public` - Configured `.storybook/main.ts` with staticDirs: `['../public']` - Built shared `.storybook/preview.tsx` with the real provider tree (MemoryRouter + Redux store + styled-components ThemeProvider + GlobalStyle), MSW loader, MockDate, and a #modal portal-root decorator - Wrote MSW handlers for mealdrop.netlify.app/.netlify/functions/restaurants (list + by-id) - Created 10 colocated `*.stories.tsx` files (Button, Badge, Heading, Body, Review, Logo, Spinner, TopBanner, ErrorBlock, RestaurantCard) — 37 stories total, plus matching names (Default, Disabled, New, Closed, Loading) that the pre-existing `.test.tsx` files compose - Included one CssCheck story on Button assert

1
12
1,622
✦ Change detection Storybook can now highlight and filter down to the stories you (or your agent) are actively working on. This is just our first round. We have a lot more in store for this workflow.
Filter menu open, with items for New, Modified, and Related

ALT Filter menu open, with items for New, Modified, and Related

1
10
961
Storybook 10.4 is here! 🤖 Automated setup ✦ Change detection 🤝 Quick sharing 🌴 TanStack React framework 💯 Improvements and bug fixes
10.4. Anthropic, OpenAI, Gemini, and TanStack logos

ALT 10.4. Anthropic, OpenAI, Gemini, and TanStack logos

1
27
228
21,458
🖤❤️ RNR 352 ❤️🖤 This week: @Danny_H_W is on the show!! Daniel stops by to chat about the latest in Storybook 10 with @robinheinze and @mazenchami. New episode out now 🎧 infinite.red/react-native-ra…

React Native Radio - RNR 362 - Storybook with Daniel Williams

Daniel Williams stops by to chat with Mazen and Robin! We dig into Storybook 10's leaner bundle, the 10.3 MCP server unlocking AI agent workflows, what Chromatic is cooking up for visual regression...

infinite.red
15
22
3,161
Is your component library lighting up in errors and not sure how to tackle it? 👀 On Thursday, we’re showing how teams use parallel AI agents with Storybook + Chromatic to triage, fix, validate, and retest accessibility issues simultaneously. Register in comments 👇
how to use parallel agents to fix a11y issues

ALT how to use parallel agents to fix a11y issues

2
1
4
757
Register here: us02web.zoom.us/webinar/regi…

Video Conferencing, Web Conferencing, Webinars, Screen Sharing

Zoom is the leader in modern enterprise video communications, with an easy, reliable cloud platform for video and audio conferencing, chat, and webinars across mobile, desktop, and room systems. Zoom...

us02web.zoom.us
1
503
Storybook retweeted
Chromatic@chromaticcom
May 6
Many a11y issues are repetitive, straightforward, and ideal for parallelized AI workflows. 🤖 Learn how to use Storybook + Chromatic to: ✅ Detect issues ✅ Parallelize remediation ✅ Use AI agents to fix + retest ✅ Validate fixes in Storybook 🎟️ Register in comments 👇
how to use parallel agents to fix a11y issues

ALT how to use parallel agents to fix a11y issues

2
1
4
939
AI agents are changing frontend dev and Storybook is evolving to keep up. Join our session where we share what’s next: ✨ review only changed stories ⚡ faster setup with agents 🧩 10x faster, more complete docgen 🛠 skills with Storybook Register for live Q&A + the recording👇
what's next for storybook and AI webinar invitation

ALT what's next for storybook and AI webinar invitation

1
2
20
2,357
🎟️ Register here: us02web.zoom.us/webinar/regi…
1
736
Storybook 10.3 is out! ✨ Storybook MCP for React ♿ A11y overhaul fixes 100s of issues 🧑‍💻 CLI overhaul for faster, more reliable install 💅 New Viewports and Zoom UI ✅ New onboarding guide 🏭 Type-safe CSF factories for Vue, Angular, and Web Components Take a look ⤵️
10.3, MCP

ALT 10.3, MCP

3
40
266
20,888
more replies
Lots of ecosystem and community updates, too: ⚡ @vite_js 8 ▲ @nextjs 16.2 📝 @geteslint 10 🅰️ @angular 21 🦀 CLI init support for Rsbuild ⚡️ @preactjs support for Vitest addon 🤘 Community Vike integration 🚀 Community @astrodotbuild framework (experimental)
1
7
73
31,210
Get started: - npm create storybook@latest Or upgrade: - npx storybook@latest upgrade And read the post for more details: storybook.js.org/blog/storyb…

Storybook 10.3: MCP, a11y improvements, & workflow upgrades

Component-driven development for humans and agents

storybook.js.org
1
9
2,172
Exciting to see Storybook powering AI-driven prototyping with Bolt! ⚡️
bolt.new
@boltdotnew
Mar 31
Replying to @boltdotnew
Vibe-coded prototypes get thrown away because they don’t use your design system code. Bolt’s Design System Agents fix this: - Upload your npm package, @storybookjs, repo, etc - Bolt builds using your design system - Engineering wires up the backend and ships
3:10
1
7
2,564
Storybook retweeted
Adam
@adamdotdev
Mar 30
Tremendous alpha in having AI write storybook pages that allow designers to tweak layout of dynamic UI. @kitlangton does this kind of stuff for everything, inspired me! Even wrote a vite plugin that writes back the CSS changes to source so David can send PRs.
0:55
15
15
368
32,415
Storybook retweeted
bolt.new
@boltdotnew
Mar 31
Vibe-coded prototypes get thrown away because they don’t use your design system code. Bolt’s Design System Agents fix this: - Upload your npm package, @storybookjs, repo, etc - Bolt builds using your design system - Engineering wires up the backend and ships
3:10
5
4
52
14,190
Want to hear directly from the team behind Storybook MCP? Join our live AMA where we’ll cover why we built an MCP server, how agents helped us move faster with more rigor, our eval tooling, and what’s next. 🗓️ March 31, 2026 ​⏰ 2:00 pm EDT / 20:00 CET Register in comments👇
storybook mcp ama webinar

ALT storybook mcp ama webinar

2
1
6
1,086
🔗 save your spot: us02web.zoom.us/webinar/regi…
1
486
Load more