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
Storybook retweeted
Rspack@rspack_dev
3 Dec 2025
Storybook CLI now auto-detects Rsbuild projects and installs deps like storybook-react-rsbuild for you. Huge shoutout to the @storybookjs team!
8
50
4,604
🔗 storybook.js.org/blog/storyb…

Storybook MCP sneak peek

Generate code with your components faster using fewer tokens

storybook.js.org
531
Agents can’t “just read the repo.” Thousands of files + type soup = instant confusion. Storybook MCP gives agents only the good stuff—curated patterns from your stories, docs & tests—and a loop to self-fix with your component tests. Link to request early access in comments 👇
storybook-mcp-early-access-program

ALT storybook-mcp-early-access-program

2
4
15
1,158
I'll be talking @storybookjs MCP at the JavaScript Developer Conference in Taiwan this week with @evanyou, @tejask, @yusukebe, and many more. 🤩 Excited to see everybody there!
3
8
1,254
🔥 Alongside the @Angular v21 release, @AnalogJS 2.1 is out! 🍞 Improved @Rolldown support for @vite_js 🤖 Experimental @Angular Compilation API support ⚡️ Performance improvements with @vitest_dev github.com/analogjs/analog/r…

Release v2.1.0 · analogjs/analog

2.1.0 (2025-11-20) Bug Fixes content: stripped filename to match filename also for additionalContentDirs (#1962) (cdacae0) create-analog: bump TypeScript to 5.9.x (7a94868) platform: enable esbuil...

github.com
1
11
80
5,325
Storybook retweeted
Storybook@storybookjs
17 Nov 2025
🧵 (1/3) Most AI-generated code looks good until you try to merge it. Wrong props, odd states, subtle regressions. Storybook MCP fixes that. It turns your stories, docs & tests into machine-readable context so agents actually follow your patterns.
Storybook-MCP-early-access-program

ALT Storybook-MCP-early-access-program

1
12
59
4,455
(3/3) We’re assembling a group for Early Access to help shape MCP before launch. 👉 Want in? Request access here: storybook.js.org/blog/storyb…

Storybook MCP sneak peek

Generate code with your components faster using fewer tokens

storybook.js.org
8
1,064
(2/3) Benchmarks: Higher-quality code that's 3× faster with 50% fewer tokens. And when agents get things wrong, Storybook MCP gives them a self-healing loop. They can run your interaction + accessibility tests, see what fails & fix their own bugs before you ever open a PR.
1
3
1,088
Storybook retweeted
Chromatic@chromaticcom
12 Nov 2025
Most teams fix a11y issues. Not all stop creating new ones. Tomorrow, our product team is sharing how we built a system that does both—cutting 15k+ violations without slowing delivery. Join us live & bring your questions! 📅 Nov 13 • 12 PM ET / 18 CET 👉 Register in comments
How we fixed 15K accessibility issues in Chromatic using Chromatic

ALT How we fixed 15K accessibility issues in Chromatic using Chromatic

1
1
1
738
Been tasked with running a presentation on our use of @storybookjs to the wider team. Decided to use some LOTR puns for chapters but need more. For example: Prologue: There are Stack again Ch 1: Building what is given to us Ch 2: Of Products Ch 3: Tests - you shall pass!
1
2
2
1,224
Storybook retweeted
Chromatic@chromaticcom
7 Nov 2025
We cut our a11y issues by 94% after we stopped treating them as tickets & started treating them as system flow. Then we blocked new regressions in CI, inflow dropped to zero & the backlog finally moved. We’re sharing how we did it in a live session on 11/13. 🔗 Link in comments
How we fixed 15K accessibility issues in Chromatic using Chromatic

ALT How we fixed 15K accessibility issues in Chromatic using Chromatic

1
1
2
734
Storybook retweeted
Daniel Williams
@Danny_H_W
4 Nov 2025
React Native Storybook 10 is out too Mostly compatibility with version 10 One main breaking change is to the withStorybook function to make it easier to remove storybook from your bundle. Migration guide in 🧵
Storybook@storybookjs
4 Nov 2025
Storybook 10 is here! ✂️ ESM-only (the only breaking change!) 🧩 Module automocking for easier testing 🏭 Typesafe CSF factories Preview for React 💫 UI editing and sharing optimizations 🏷️ Tag filtering exclusion for sidebar management 🔀 Svelte async component support
Storybook 10 is 29% lighter than Storybook 9, which is 50% lighter than Storybook 8.

ALT Storybook 10 is 29% lighter than Storybook 9, which is 50% lighter than Storybook 8.

1
1
11
1,842
Check the post for more details and commands to get started! Huge thank you to the 70 contributors that helped make this release happen, and to our community providing feedback and cheering us on. 💖 storybook.js.org/blog/storyb…

Storybook 10

ESM-only, 29% lighter, module automocking, and more

storybook.js.org
7
1,125
And some peeks at what’s coming… An experimental test syntax, making it easier than ever to write familiar tests for your components and test them in Storybook. And we’ve released experimental support for RSC component testing, in collaboration with the entire React ecosystem.
Code snippet containing: import preview from '../.storybook/preview'; import Button from './Button'; const meta = preview.meta({ component: Button }); export const Disabled = meta.story({ args: { disabled: true } }); // 🆕 .test method: Attach tests to a story! // The test function can run the same code as the play function Disabled.test('should be disabled', async ({ canvas, userEvent, args }) => { const button = await canvas.findByRole('button'); await userEvent.click(button); await expect(button).toBeDisabled(); await expect(args.onClick).not.toHaveBeenCalled(); });

ALT Code snippet containing: import preview from '../.storybook/preview'; import Button from './Button'; const meta = preview.meta({ component: Button }); export const Disabled = meta.story({ args: { disabled: true } }); // 🆕 .test method: Attach tests to a story! // The test function can run the same code as the play function Disabled.test('should be disabled', async ({ canvas, userEvent, args }) => { const button = await canvas.findByRole('button'); await userEvent.click(button); await expect(button).toBeDisabled(); await expect(args.onClick).not.toHaveBeenCalled(); });

1
9
1,242
We also added support for the latest ecosystem updates. - @sveltejs async components and state mocking - @nextjs 16 - @vitest_dev 4
1
6
599
Tag filtering has been overhauled. You can now include or exclude stories with specific tags from your sidebar. And you can configure your Storybook to do that filtering by default.
The open filter menu containing Clear filters, experimental (checked), Documentation, and Play

ALT The open filter menu containing Clear filters, experimental (checked), Documentation, and Play

1
4
649
We also squeezed in some fun UX improvements. Open a story in your editor with a click or scan a QR code to open that story on your phone.
A menu showing Copy story link, Open in isolation mode, and Scan me with a QR code

ALT A menu showing Copy story link, Open in isolation mode, and Scan me with a QR code

1
9
768
CSF Factories are now in Preview for React users. They bring better type safety and significantly less boilerplate. Support for other frameworks coming soon!
Code snippet containing: // CSF 3 import type { Meta, StoryObj } from '@storybook/nextjs-vite'; import Button from './Button'; const meta = { component: Button } satsifies Meta<typeof Button>; export default meta; type Story = StoryObj<typeof meta>; export const Primary: Story = { args: { label: 'Button', primary: true } }; // CSF Factories - Less boilerplate and no type assignments! 🎉 import preview from '../.storybook/preview'; import Button from './Button'; const meta = preview.meta({ component: Button }); export const Primary = meta.story({ args: { label: 'Button', primary: true } });

ALT Code snippet containing: // CSF 3 import type { Meta, StoryObj } from '@storybook/nextjs-vite'; import Button from './Button'; const meta = { component: Button } satsifies Meta<typeof Button>; export default meta; type Story = StoryObj<typeof meta>; export const Primary: Story = { args: { label: 'Button', primary: true } }; // CSF Factories - Less boilerplate and no type assignments! 🎉 import preview from '../.storybook/preview'; import Button from './Button'; const meta = preview.meta({ component: Button }); export const Primary = meta.story({ args: { label: 'Button', primary: true } });

1
13
958
Storybook 10 adds a new `sb.mock` API, inspired by @vitest_dev's mocking capabilities and tailored for isolated component development and testing.
Code snippet containing: // .storybook/preview.ts import type { Preview } from '@storybook/nextjs-vite'; import { sb } from 'storybook/test'; // 👇 Automatically spies on all exports from the `lib/session` local module sb.mock(import('../lib/session.ts'), { spy: true }); // 👇 Automatically spies on all exports from the `uuid` package in `node_modules` sb.mock(import('uuid'), { spy: true }); const preview: Preview = { // ... }; export default preview;

ALT Code snippet containing: // .storybook/preview.ts import type { Preview } from '@storybook/nextjs-vite'; import { sb } from 'storybook/test'; // 👇 Automatically spies on all exports from the `lib/session` local module sb.mock(import('../lib/session.ts'), { spy: true }); // 👇 Automatically spies on all exports from the `uuid` package in `node_modules` sb.mock(import('uuid'), { spy: true }); const preview: Preview = { // ... }; export default preview;

1
15
1,171
Load more