Storybook 10.3

Storybook 10.3 adds MCP for React so AI agents can reuse real components, write stories, and run focused component and accessibility tests. It also improves Storybook’s accessibility, expands CSF Factories to more frameworks, and adds support for newer frontend tooling like Vite 8 and Next.js 16.2.

👇 Try Storybook 10.3 today

Storybook MCP for React

Storybook MCP for React gives AI agents direct access to your real components, stories, docs, and tests so they can build production grade UI instead of hallucinating their way through it.

Agents can discover what components already exist, reuse them across app and design-system boundaries, show their work as live story previews right in the chat, and even run focused component and accessibility tests to fix issues on their own. It’s a compelling glimpse of what AI-assisted frontend work looks like when the agent has real context and guardrails, not just vibes. It breaks down into toolsets:

• 🧑‍💻 Dev toolset helps agents show their work in all key UI states
• 📚 Docs toolset helps agents reuse design system components
• 🧪 Test toolset sets guardrails so agents can self-correct

Read the full article:

Storybook MCP for React

Storybook-powered agentic UI development

Storybook BlogKyle Gach

Accessibility overhaul

Storybook’s component a11y testing workflow makes accessible UI work repeatable, actionable, and part of the normal dev loop. It’s also a great way to work through “a11y debt” in existing codebases. In Storybook 10.x, we used it ourselves to produce a steady stream of a11y improvements across Storybook’s UI.

Improvements include better ARIA semantics, stronger keyboard navigation and focus management, better contrast and high-contrast support, reduced-motion refinements, WCAG-minded docs fixes, better landmark navigation, accessible resize handles and zoom controls, and continued polish for the A11y addon itself.

For the complete set of changes, please see accessibility PRs.

CSF Factories

In Storybook 10 we released CSF Factories, a more type-safe way to write component examples and tests with autocompletion and less boilerplate. These improvements are not only far more ergonomic for users, but we’ve also seen them help coding agents write stories more easily.

The initial 10.0 factories release was React-only. Since then, we’ve followed up with support for Vue, Angular, and Web components.

// CSF 3
import type { Meta, StoryObj } from '@storybook/your-framework';
import Button from './Button';

const meta = { component: Button } satisfies 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 }
});

There are codemods to automatically upgrade your existing stories, but you are not obligated to upgrade. Older versions of CSF are still supported and will be for the foreseeable future. CSF Factories are in Preview status, which means we don’t anticipate any significant changes before their stable release in Storybook 11.

To learn more, read the CSF Next docs for React, Vue, Angular, and Web components.

Ecosystem and community

Storybook’s strength comes from its ecosystem: a huge community, first-class framework support, and integrations that meet frontend teams where they work. Storybook 10.3 delivers a broad set of improvements across that ecosystem.

Core improvements include:

• ⚡ Vite 8
• ▲ Next.js 16.2
• 📝 ESLint 10
• 🅰️ Angular 21
• 🦀 CLI init support for Rsbuild
• ⚡️ Preact support for Vitest addon

Meanwhile, the community has also been hard at work:

• 🤘 Community Vike integration
• 🚀 Community Astro framework (experimental)

How to upgrade to Storybook 10.3

New to Storybook? Create a project::

npm create storybook@latest

Already using Storybook? Upgrade now with our automated migration wizard:

npx storybook@latest upgrade

We also provide a migration guide to help upgrading from previous majors.

What’s next?

As AI models become more capable software builders, development workflows are being completely rewritten. Tools like Storybook need to adapt.

MCP for React is our first move, but it’s only the beginning. We’re already exploring what comes next: reusable skills, support across more frameworks, better ways to visualize components inside agentic editors, and first-class design token support are a few of the things we’re cooking.

But this shift isn’t just about making agents more capable. It’s about creating a better development environment overall. Each step of the way, we plan to keep raising the bar for human developers too, making Storybook more usable, more integrated, and more effective for everyone who builds UI.

Contributors (10.1-3)

@43081j @50bbx @6810779s @abhaysinh1000 @achesin @akornmeier @alex-js-ltd @anchmelev @andreww2012 @ar-saeedi @beeswhacks @bryan-codaio @chida09 @chiman2937 @cjeonguk @copilot @createhb21 @dannyhw @dididy @dschungelabenteuer @dukedesouth @ec-9624 @ehoodgoren @etiennepasteur @gayanmatch @ghengeveld @gpoole @harshit-mourya @hpohlmeyer @huang-julien @ia319 @icopp @jeevikar14 @jonathan-fulton @jonniebigodes @jovidecroock @jreinhold @jsmike @k35o @kasperpeulen @kylegach @maelryn @majiayu000 @matthijsgroen @michaelarestad @mixelburg @mrginglymu  @msmx-mnakagawa @nathan54villaume @nathanjessen @ndelangen @nikhilchowdhury27 @nnt1054 @nzws @pallaprolus @pavan-sh @quisido @reduckted @reeseo3o @remino @renoschubert @robbchar @rohan436 @sakit0 @samuelt-beslogic @sekeidesign @shilman @sidnioulz @silverwind @snippy4 @sod @superlipbalm @tanujbhaud @theruslan @theseydicharyyev @unional @valentinfunk @valentinpalkovic @vanessayuenn @viditkbhatnagar @whdjh @wioletakolodziej @wumingdao @y-hsgw @yannbf @yatishgoel @yeonny0723 @yoshi-taka @yue4u