Storybook
LightNews LightNews
banner
storybook.js.org
Storybook
@storybook.js.org
3.3K followers 140 following 250 posts
Develop, test, and document UI in isolation
🔗 storybook.js.org
🛠️ Maintained by Chromatic
Posts Replies Media Videos
storybook.js.org
And some peeks at what’s coming…

We’ve extended CSF Factories with a 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(); });
November 4, 2025 at 7:02 PM
storybook.js.org
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
November 4, 2025 at 7:02 PM
storybook.js.org
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
November 4, 2025 at 7:02 PM
storybook.js.org
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 } });
November 4, 2025 at 7:02 PM
storybook.js.org
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;
November 4, 2025 at 7:02 PM
storybook.js.org
We’re thrilled to share that Storybook 10 is ESM-only. This reduces install size by 29%, allowed us to stop minifying our code, and helps push the Javascript ecosystem toward a simpler, standardized future.
Storybook 10 is 29% lighter than Storybook 9, which is 50% lighter than Storybook 8.
November 4, 2025 at 7:02 PM
storybook.js.org
Storybook’s CSF Next is coming 👀

Faster story authoring. Less boilerplate. Built-in TypeScript.
And a sneak peek at the new .test() method for writing component tests that feel natural.

Join our Storybook maintainers live on Oct 16 for a live demo of what’s next.

Registration in comments 👇
Webinar invitation – CSF Next: Less Boilerplate, faster story writing
October 10, 2025 at 2:47 PM
storybook.js.org
AI can write your UI. But can you trust it?

Kevin Leneway, (Principal AI SE, Pioneer Square Labs) uses Cursor × Storybook to turn raw AI output into prototypes you can validate fast.

🗓️ Oct 12 — 12 PM EDT / 18:00 CET
🔗 Registration link in comments
kevin-leneway-webinar-rapid-frontend-prototyping-cursor-storybook
September 29, 2025 at 4:17 PM
storybook.js.org
Cursor writes code fast, but does it work? Pair it with Storybook to see components render in isolation–good, bad or broken.

Join us with Kevin Leneway for a live demo of his workflow:
✅ Feed Cursor a build checklist
✅ Watch components render live
✅ Decide: iterate, ship, or scrap

Register below👇
kevin-leneway-webinar-rapid-frontend-prototyping-cursor-storybook
September 24, 2025 at 8:38 PM
storybook.js.org
We're excited about this smaller, simpler, and more modern version of Storybook.

You can try it today, in Storybook 10 beta. Check our migration guide for details:

storybook.js.org/docs/10/rele...
10 beta
September 9, 2025 at 3:48 PM
storybook.js.org
The next version of Storybook will only have one significant breaking change:

Storybook 10 is ESM-only.
A yellow 8 with a large and complex dependency graph underneath, a right arrow extending from that labeled 50% lighter pointing to a pink 9 with a much smaller and simpler graph underneath, another right arrow extending from that labeled 15% lighter pointing to a blue 10 with a simpler dependency graph labeled ESM and a graph with a red line through it labeled No CJS
September 9, 2025 at 3:48 PM
storybook.js.org
Thursday: @tpitre.bsky.social (CEO, Southleft) shows what happens when you give AI your design system:

⚡ On-brand UI from the first prompt
🧩 Storybook + MCP + Claude workflows
🚀 Faster prototyping, fewer re-prompts

Don’t miss it! (link in comments)
ai in design systems webinar
August 26, 2025 at 3:42 PM
storybook.js.org
With either technique, you now have a mocked module available in all of your stories. You can manipulate the behavior in the same place where you test it. It’s the perfect balance of simplicity and powerful flexibility.
The file Dashboard.stories.ts containing the code: import { mocked } from 'storybook/test'; import { trackEvent } from '../lib/analytics.ts'; export const MyStory = { beforeEach: () => { /* * The `trackEvent` function is already a mock! * The `mocked` utility is just for proper mock function types */ mocked(trackEvent).mockResolvedValue({ status: 'ok' }); }, play: async () => { // ... interact with the component await expect(trackEvent).toHaveBeenCalledWith('dashboard-viewed'); }, };
August 21, 2025 at 6:00 PM
storybook.js.org
When you need more control over the mock implementation, use the `__mocks__` convention to provide a mock file:
The file .storybook/preview.ts containing the code: import { sb } from 'storybook/test'; // Replaces imports with `../lib/__mocks__/analytics.js`, if found sb.mock('../lib/analytics.ts'); // Works for external modules, too: `/__mocks__/uuid.js` sb.mock('uuid');
August 21, 2025 at 6:00 PM
storybook.js.org
You have two options when setting up a mock, automatic or with a mock file.

For most cases, the automatically created mocks are perfect. Just call the `sb.mock` utility in your Storybook's preview configuration.
The file .storybook/preview.ts containing the code: import { sb } from 'storybook/test'; // Automatically replaces imports from this module with mocked versions sb.mock('../lib/analytics.ts'); // Works for external modules, too sb.mock('uuid');
August 21, 2025 at 6:00 PM
storybook.js.org
Testing components that depend on things like localStorage or authentication can be tricky. Storybook makes it easy with our new module mocking API built on top of @vitest.dev's excellent mocking tools.

storybook.js.org/blog/next-ge...
The file Dashboard.stories.ts containing the code: import { mocked } from 'storybook/test'; import { trackEvent } from '../lib/analytics.ts'; export const MyStory = { beforeEach: () => { /* * The `trackEvent` function is already a mock! * The `mocked` utility is just for proper mock function types */ mocked(trackEvent).mockResolvedValue({ status: 'ok' }); }, play: async () => { // ... interact with the component await expect(trackEvent).toHaveBeenCalledWith('dashboard-viewed'); }, };
August 21, 2025 at 6:00 PM
storybook.js.org
AI-generated UI ≠ production UI.

AI UI is off-brand without your design system, and falls apart in production.

Join us live with @tpitre.bsky.social, CEO of Southleft & AI-powered DS expert, to see how Storybook + MCP + Claude generate UI from your real components.

Registration in comments 👇
tj-pitre-ai-design-systems-webinar
August 20, 2025 at 4:08 PM
storybook.js.org
Tomorrow, we're showing you how we cut 48% of Storybook’s bundle size.

Join Jeppe Reinhold (Storybook core) and James Garbutt (aka 43081j, head of e18e) for a live breakdown with Q&A.

🔗 Grab your spot: us02web.zoom.us/webinar/regi...
July 14, 2025 at 3:33 PM
storybook.js.org
Want to cut your app’s bundle size in half?

Storybook just slashed its bundle by 48%. Now the devs behind it—@reinhold.is & @43081j.com —are showing how you can do the same.

✅ What they cut
✅ How to find & fix bloat
✅ What’s next for optimization

📍 Save your seat: us02web.zoom.us/webinar/regi...
July 11, 2025 at 2:30 PM
storybook.js.org
whoa we were mentioned in Figma's S1 filing 🤯
S1 filing mentions Storybook
July 2, 2025 at 2:35 PM
storybook.js.org
👀 Keep an eye on new violations with Chromatic’s new Accessibility Regression Testing and reporting

Just starting to tackle a11y issues and overwhelmed with violations? Chromatic allows you to temporarily accept existing violations and continue to track new or updated ones.
Accessibility dashboard with realtime reports
July 1, 2025 at 5:03 PM
storybook.js.org
🚥 Automate a11y checks in Storybook, CLI, and CI

Make sure you never ship another UI a11y violation.

Automate accessibility checks across all of your stories alongside your component tests. Works in the Storybook app, the CLI (❤️ @vitest_dev), and CI.
Storybook reports a11y test status in the sidebar
July 1, 2025 at 5:03 PM
storybook.js.org
🔗 Copy a link to a violation to share with others

Copy a link to the violation you’re looking at with a click. Then share it with your teammates when you have questions or need some help. They’ll see exactly what you’re seeing.
Zoomed-in view of a violation's "Copy link" button
July 1, 2025 at 5:02 PM
storybook.js.org
🔧 Fix violations with actionable tips

Each violation provides the details you need to find and fix it, including details about the violating element, a button to jump to it in the canvas, and most importantly, a link to learn more about resolving it.
An expanded group of "insufficient color contrast" violations, showing many details including a link to learn how to resolve them
July 1, 2025 at 5:01 PM
storybook.js.org
🔎 Spot issues fast with the redesigned Accessibility addon

Same reliable checks as before with axe-core. Completely rethought to help you find and fix violations more quickly.

And we now automatically detect and wait for animations to finish.
Storybook's Accessibility addon panel with violations highlighted in the canvas
July 1, 2025 at 5:01 PM