Storybook 11 beta was announced on 9 November 2026, and its focus is clear from the subtitle: “agent-ready design systems for React, Vue, Angular, Web Components, and Svelte.” It adds official skills for coding agents, a headless CLI, fully type-safe stories (CSF 4) and a new Vite-based Angular framework. This tutorial shows React and Angular developers how to try the beta, what the new CLI does, and how to write a CSF 4 story.

What’s new at a glance

From the official announcement:

  • Official skills that guide coding agents through building UI with your components, writing stories, testing and presenting work for review.
  • Claude and Codex plugins, with skills also published on skills.sh.
  • A headless storybook tools CLI you can use in your own scripts and workflows.
  • CSF 4, a type-safe “factories” story format, with codemods. CSF 3 remains fully supported.
  • Better framework support, including react-component-meta for React and a new @storybook/angular-vite framework.
  • The Storybook team says the package is 25% smaller and delivers context up to 10x faster than v10.

The stable release is planned for December, and the team is asking for feedback on the beta.

Try the beta

Work on a branch. In an existing project, run the upgrade command, which applies automigrations and lists anything you must change by hand:

git checkout -b storybook-11-beta
npx storybook@next upgrade

Or create a fresh project to experiment:

npm create storybook@next

Read the migration guide linked from the release post before merging. It lists every breaking change.

The headless storybook tools CLI

Storybook 11 adds a tools command that exposes a fast, headless Storybook. It powers the official skills, but you can call it yourself:

# See all available tools
npx storybook@next tools --help

# List components and documentation with their IDs
npx storybook@next tools docs list

# Show the docs for one component
npx storybook@next tools docs show --id "your-component-id"

Two more tools matter for review workflows:

  • storybook tools test run runs functional and accessibility tests powered by Vitest, for specific stories or the whole project.
  • storybook tools review create prepares a browser review that groups stories for changed components and affected pages, with summaries and key states to check.

The CLI attaches to an existing dev server only when a tool needs the browser, and skips it otherwise. That makes docs list cheap enough to run in a pre-commit hook or a CI step that checks every component is documented.

Skills: give your coding agent component context

Skills are the centrepiece of the release. The ui-workflow skill guides an agent through building UI with your components, writing stories, testing and presenting the result. The component-docs skill helps the agent find existing components and query their APIs, metadata, docs and examples in a token-efficient format before it writes new code.

Skills are installed on upgrade and in new projects. Storybook still supports MCP, but the team recommends skills for local agent work because agents can fetch component context without a running Storybook instance.

In practice this targets a familiar problem: an agent creates a second Button because it never discovered yours. With component-docs available, it can look up the existing one first.

Write a type-safe CSF 4 story (React)

CSF 4 uses factory functions so props, args and parameters are checked by TypeScript. The pattern from the announcement starts from your preview config:

// src/components/Button.stories.tsx
import preview from '../../.storybook/preview';
import { Button } from './Button';

const meta = preview.meta({
  component: Button,
  parameters: { layout: 'centered' },
});

export const Primary = meta.story({
  args: { primary: true, label: 'Save changes' },
});

export const Secondary = meta.story({
  args: { primary: false, label: 'Cancel' },
});

If Button has no label prop, or primary is typed as a string, the story fails type-checking instead of silently rendering wrong. Storybook addons can also extend these types to add their own parameters.

You don’t have to convert everything at once. Storybook 11 provides codemods for existing stories, and CSF 3 files keep working next to CSF 4 files, so you can migrate one folder at a time.

React: more accurate component metadata

For React, Storybook 11 uses react-component-meta to extract component metadata. It replaces the older react-docgen and react-docgen-typescript options, and the team says it gives better accuracy and performance. After upgrading, open the Docs tab for components with complex props (unions, generics, forwarded refs) and check that the args table looks right.

Angular: the new angular-vite framework

Angular teams get the biggest change. @storybook/angular-vite is a new framework built with Analog.js maintainer Brandon Roberts and the Angular core team. The announcement describes it as very fast, with high-quality component metadata, and says it resolves hundreds of outstanding issues from @storybook/angular.

It targets Angular 21 and later, and the release post links to a dedicated migration page for moving from @storybook/angular. A sensible plan for an Angular workspace:

  1. Confirm the workspace is on Angular 21+.
  2. Run npx storybook@next upgrade on a branch.
  3. Follow the Angular migration guide linked from the announcement to switch the framework to @storybook/angular-vite.
  4. Start Storybook and compare the Docs pages for a few components with inputs, outputs and content projection.
  5. Run npx storybook@next tools test run to confirm interaction and accessibility tests still pass.

Things to check before adopting

  • It’s a beta. Keep it on a branch or in a sandbox until the stable release.
  • Addon compatibility. Third-party addons may need updates for the new core.
  • CI scripts. If you call Storybook commands in CI, re-test them after the upgrade.
  • Agent permissions. If you enable skills or plugins, decide what your coding agent may change, and keep human review in place. Storybook’s review tool is designed for exactly that.

Takeaway

Storybook 11 repositions Storybook as the component context layer for both humans and coding agents. For React teams, the quick wins are CSF 4 type safety and better metadata. For Angular teams on v21+, the new Vite-based framework is the reason to test early. Upgrade a branch, run storybook tools docs list to see what an agent would see, and send feedback before the December release.

Source: Storybook blog: Storybook 11 beta.