@storybook/react

Improved UI and story authoring ergonomics

Storybook 10.2 contains hundreds of fixes and improvement including:

• 💅 New Viewports and Zoom UI

• 🏭 Typesafe CSF factories for Vue, Angular, Web Components (preview)

• 📄 MDX support for Storybook MCP (experimental)

List of all updates

• Addon-A11y: Lock vision filter dropdown for stories with `vision` global

• Addon-Docs: Add MDX manifest generation

• Addon-Docs: Skip `!autodocs` stories when computing primary story

• Addon-Pseudo States: Fix stylesheet rewrite for `:not()` with parenthesis in inner selector

• Addon-Vitest: Added timeout for fetching localhost 6006 during global setup.

• Addon-Vitest: Fallback detecting vitest version in postinstall

• Addon-Vitest: Improve error message in testing widget modal

• Addon-Vitest: Improve perf & fix loading incorrect `.env` file

• CLI: Detect free port when running dev during initiate

• CLI: Remove any return type of getAbsolutePath

• CLI: Skip vitest transform for CSF Factories in a11y-addon-test automigration

• Codemod: Fix glob string to only match stories files

• Controls: Allow resetting the Select control

• Controls: Fix displaying as object instead of select for optional union types

• Controls: Force object control JSON mode to reset

• Core and Vite: Use story index as source of truth for Vite paths

• Core: Add `getStoryHrefs` manager API and add hotkey for "open in isolation"

• Core: Add global error boundary for Manager UI

• Core: Add support for wrapped components in component transformer

• Core: Add try-catch for cross-origin access in Storybook hooks

• Core: Add zoom level 8 and limit manual input to 800%

• Core: Avoid late layout shift and improve ChecklistWidget perceived performance

• Core: Ensure /project.json route is up before builders serve local FS

• Core: Fix `react-docgen-typescript` support in story creation

• Core: Fix Checklist behavior with hidden sidebar

• Core: Fix cwd handling for negated globs

• Core: Fix Date input layout

• Core: Fix import statement for `react-docgen-typescript`

• Core: Fix input width

• Core: Fix manual zoom input field UX

• Core: Fix onboarding visual bugs, survey telemetry and modal dismissal

• Core: Fix play function `mount` detection when destructuring in the function body

• Core: Fix viewport args handling and reset option

• Core: Honor BROWSER shell scripts before xdg-open

• Core: Improve addon sanitization

• Core: Improve path handling in arg types data extraction

• Core: Improve the story generation experience

• Core: Redesign and refactor Viewports tool

• Core: Refactor channel initialization

• Core: Render sidebar toggle on settings pages

• Core: Retry `writeFile` cache when EBUSY error occurs

• Core: Support defineConfig when setting up ESLint plugin

• Core: Support disabling Checklist widget through feature config

• Core: Track vision simulator state through globals and apply styles in preview

• Core: Use canonical links in sidebar and menu

• Core: Viewport UX fixes

• Core: Zoom tool reimplementation

• CSF-Factories: Add CSF Factories for Vue3, Web Components, and Angular

• CSF-Factories: Allow kebab-case HTML attribute names in web components args

• CSF-Factories: Export WebComponentsTypes and VueTypes

• CSF-Factories: Skip non-factory exports instead of throwing error

• CSF: Export type to prevent `type cannot be named`-errors

• Dependencies: Bump various packages

• Dependencies: Update `baseline-browser-mapping`

• Docgen: Update extraction of React docgen

• Docs-Blocks: Fix broken tooltip in ArgValue details

• Interactions: Add disable parameter for interactions panel

• Interactions: Fix state reset bug when switching stories with date mocks

• Manager: Ensure reset item only appears in globals toolbar when specified

• Manager: Fix system query parameters being overridable

• Manifests: Add support for summaries in MDX files

• Manifests: Refactor from `componentManifestGenerator` to extensible `manifests` preset property

• Manifests: Support `!manifest` tag in preview files

• NextJS: Import `next/dist` with `.js`-extension for ESM compat

• NextJS: Support top-level weight/style in next/font/local with string src

• NextJSVite: Add `@opentelemetry/api` to `optimizeDeps`

• NextJSVite: Upgrade plugin

• Onboarding: Fix navigation to first story when configure-your-project entry missing

• Onboarding: Hide TourGuide as soon as tests start

• Preview: Prevent error in RN due to `navigator?.clipboard`

• Preview: Treat canceled animations as finished

• React: Use self-closing tag for code snippets

• SvelteKit: Align JS template with TS template

• Telemetry: Add `packageJson.type`

• TypeScript: Fix summary undefined type issue

• TypeScript: Improve globalTypes type-strictness

• TypeScript: Reduce `cannot be named` errors

• TypeScript: Support `exactOptionalPropertyTypes` for public API types

• UI: Ensure consistent right padding in TreeNode

• UI: Ensure preview error displays use a readable text color

• UI: Fix border color for Select picker

• UI: Fix empty sidebar after navigating from search

• UI: Fix regression in select close handler focus

• UI: Fix search highlight visibility in High Contrast Mode

• UI: Improve landmark navigation

• UI: Keep preview frame stable in overall layout

• UI: Make vertical alignment of TestStatusIcon more robust

• UI: Prevent primary story from duplicating anchor ID

• UI: Prevent updating non-existent stories in sidebar

• Upgrade: Preserve package.json indentation when upgrading

• Vue3: Update renderer's setup function to allow passing generic HostElement type

• Webpack: Revert "disable `bugfixes` property in swc and babel

• Zoom: Keyboard-shortcut for the `plus` key

• Automigrate: Fix missing await

• CLI: Remove REACT_PROJECT projectType

• Core: Exclude open from pre-bundling to make local xdg-open reachable

• Nextjs-Vite: Install `vite` during migration if not installed yet

• Telemetry: Fix race condition in telemetry cache causing malformed JSON

• Manager: Do not display non-existing shortcuts in the settings page

• Preview: Enforce inert body if manager is focus-trapped

• Telemetry: Await pending operations in getLastEvents to prevent race conditions

• UI: Fix keyboard navigation bug for "reset" option in `Select`

• Addon-Vitest: Isolate error reasons during postinstall

• CLI: Fix react native template not copying in init

Easier to setup, more accessible to use

Storybook 10.1 focuses on two key improvements: installation and accessibility:

• ♿ UI overhaul to fix hundreds of a11y issues

• 🧑‍💻 CLI overhaul for faster, more reliable install

• ✅ Checklist-based onboarding guide for new users

The release also contains compatibility fixes for:

• 🅰️ Angular 21 support

• 🦀 RSbuild install support in CLI

• ⚡️ Preact support for Vitest addon

Finally, it contains two highly-requested experimental features:

• 📋 Component manifest for Storybook MCP

• ⚛️ Improved JSX code snippets for React

List of all updates

• A11y: Add aria-selected attribute to tab buttons

• A11y: Make search clear button keyboard accessible

• Addon-Vitest: Ensure Storybook starts correctly across platforms by using shell in spawn

• Angular: Add preset entry point for framework

• Angular: Add support for v21

• Angular: Don't kill dev command by using observables

• Angular: Migrate from RxJS to async/await in command builders and run Compodoc utility as spinner

• Angular: Replace deprecated import of ApplicationConfig

• Automigration: Update description and link for addon-a11y-addon-test

• Checklist: Autocomplete "See what's new" on URL navigation

• Checklist: Data improvements

• CLI: Change yarn package manager value to yarn1

• CLI: Fix 'beforeVersion' evaluation for Storybook package

• CLI: Fix access to getOptionValue in postAction hook

• CLI: Fix framework config validation path and messages

• CLI: Fix passing flags for bun users during init

• CLI: Fix Vitest v3 installs and refactor AddonVitestService; align create‑storybook usage

• CLI: In csf-factories codemod only remove types which are unused

• CLI: Minor improvements

• CLI: Modernize Storybook CLI with new init workflow, Clack UI, and Generator System

• CLI: Standardize debug log messages across the application

• CLI: Update clack

• CLI: Update compatibility guidance link in summary message

• CLI: Update postAction hook to use command parameter for logfile retrieval

• CLI: Update upgrade message

• Core: Fix `getDocsUrl` for canary versions

• Core: Fix testing widget focus outline

• Core: Improve globbing using dynamic CWD

• Core: Rename `Listbox` component to `ActionList` and use it in `TagsFilterPanel`

• Core: Significantly improve Storybook's own accessibility

• Core: Update `getDocsUrl` to add a default `ref` param and set `guide` as ref for links in the Guide

• Guide: Collapse checklist items by default

• Guide: Hide items for which their required feature is disabled (controls, viewport, interactions)

• Maintenance: Enable syntax minification for dead code elimination

• Manager: Added tokens and a dark color scheme for status colors

• Middleware: Prepend `file://` to middleware `import` for Windows support

• Onboarding: Guided tour checklist

• React: Add isPackage flag to component imports for better package identification

• React: Add manifests/components.html page

• React: Change examples to stories in manifests and show correct examples and prop types

• React: Experimental code examples

• React: Implement manifests/component.json for React

• React: Improve automatic component, automatic imports, support barrel files and enhance story filtering

• React: Improve error handling of component manifest generation

• React: Improve error messages in component manifest

• React: Improve import rewriting when tsconfig paths are used

• Remove yarn esbuild pnp plugin

• Theming: Set `themes.normal` according to user preference and export `getPreferredColorScheme`

• UI: Add padding for ArgsTable shadow in TabbedArgsTable

• UI: Add VRTs to FileSearchModal in light theme

• UI: Fix crashes in Select when passed falsy non-string options

• UI: Fix regression on addon panel empty content fontsize

• UI: Fix trivial RefBlocks ARIA violations

• UI: Improve status handling in sidebar nodes

• UI: Increase border contrast of Checkbox, Radio, and Range

• UI: Refocus search input after clearing it

• UI: Rework default background of Color swatch for dark mode

• Upgrade: Satellite compatible with 10.1 prerelease

• CSF: Fix export interface declaration for NextPreview

• Controls: Add range validation in Number Control

• Export interface declaration for ReactMeta

• Vitest Addon: Add support for Preact

• Core: Better handling for TypeScript satisfies/as syntaxes

• Core: Fix wrong import to fix Yarn PnP support

• ESlint: Update `@storybook/experimental-nextjs-vite` in `no-renderer-packages` rule

• React Native: Update withStorybook setup instructions

Storybook 10 contains one breaking change: it’s ESM-only. This simplifies our distribution and reduces install size by 29% while simultaneously unminifying dist code for easier debugging.
It also includes features to level up your UI development, documentation, and testing workflows:

• 🧩 Module automocking for easier testing

• 🏭 Typesafe CSF factories Preview for React

• 💫 UI editing and sharing optimizations

• 🏷️ Tag filtering exclusion and configuration for sidebar management

• 🔀 Next 16, Vitest 4, Svelte async components, and more!

List of all updates

• A11Y: Bugfix missing `manager.js` entry-file

• A11y: Persist tab/highlight across docs navigation

• Addon A11y: Prevent setting highlights for old results

• Addon Docs: Fix Symbol conversion issue in docs page and controls panel

• Addon Vitest: Fix incorrect file modifications during setup

• Addon Vitest: Support modifying mergeConfig on addon setup

• Addon-docs: Add eject button to canvas toolbar

• AddonA11Y: Fix postinstall

• AddonViewport: Stricter types

• Angular: Add fileURLToPath for preview annotation paths

• Angular: Fix `entry.polyfills` undefined error

• Angular: Inherit options from browserTarget

• AutoMigration: Fix sb10 migration when main config contains `require`

• Cleanup: Remove duplicated entrypoints in core

• CLI: Add addon-console automigration

• CLI: Avoid mixed CSF in files with unconventional stories

• CLI: Change message in downgrade-blocker

• CLI: CSF factories codemod - support annotations in npx context

• CLI: Fix CSF factories addon syncing in storybook add command

• CLI: Fix throwing in readonly environments

• CLI: Init not running `dev` when it should fixed

• CLI: Make relative imports default in csf-factories codemod

• CLI: Switch over to modern-tar

• Codemod: Replace `globby` with `tinyglobby`

• Controls: Allow primitive values of ReactNode argType

• Controls: Fix adding new values to arrays

• Core: Add "open in editor" feature

• Core: Add parameter typings for addon-pseudo-state

• Core: Dedupe aria-query and @testing-library/dom packages

• Core: Enhance warning for Testing Library's `screen` usage in docs mode

• Core: Ensure valid QR code URL

• Core: Fix `external-globals-plugin` handle `undefined` cache dir

• Core: Fix Node 24 deprecation warning

• Core: Fix staticCopy not copying `index.html` to sub directory

• Core: Fix stepping back through story interactions panel

• Core: Improve addon detection in automigrations on windows

• Core: Improve es-toolkit usage for better tree-shaking

• Core: Join framework preset path with slash

• Core: Make `subtype` an optional property on an index input

• deprecated

  Core: Mark pnp support as deprecated

• Core: Prevent `BAIL` state from showing in interactions panel when switching stories

• Core: Prevent navigating to hidden (filtered) item

• Core: Remove CJS bundles, only ship ESM

• Core: Replace es-toolkit compat imports with non-compat

• Core: Switch from `mlly` to `exsolve`

• Core: Update tags filter UI

• Core: Use `exsolve` `resolveModulePath` for `safeResolveModule`

• Core: Various QA fixes

• CoreServer: Fix `Arc can't get every window`

• CSF: Add Storybook test syntax (Storybook v10)

• CSF: Enhance config-to-csf-factory to support type wrappers

• Dts: Ensure `.tsx` files emit `.d.ts` type files

• Allow proceeding without selecting automigrations in upgrade command

• ESLint plugin homepage URL updates

• Incorrect URLS for the upgrade command

• Maintenance: Fix bundle size bloat caused by `SyntaxHighlighter` (`createElement`)

• Maintenance: Hotfix for missing nextjs dts files, thanks @ndelangen!

• removed

  Maintenance: Remove globalization for dropped entrypoints

• Mock: Catch errors when transforming preview files

• Modernize: Replace `fs-extra` with native APIs

• Move: Addon jest into it's own repository

• Next.js-vite: Use `fileURLToPath` for module resolution in preset

• Next.js: Avoid multiple webpack versions at runtime

• Next.js: Remove next/config usage in Next.js >=v16 projects

• Next.js: Return mocked router instead of actual router in useRouter

• Nextjs: Fix config access for Vite

• Nextjs: Fix Nextjs version detection with prereleases

• Onboarding: Prevent confetti overlay from intercepting pointer events

• Onboarding: Tweak referral wording in survey

• PreactVite: Add `node` entry point

• Presets: Support extensionless imports in TS-based presets

• React Native: Fix document reference error in open-in-editor

• React: Simplify version detection

• Replace: Use `empathic` over `find-up`

• Svelte: Improve support for async components

• Svelte: Simplify public types - use modern `Component`

• SvelteKit: Add support for mocking `$app/state`

• SvelteKit: Fix `set_context_after_init` error when experimental async is enabled

• Tags: Remove undocumented x-only tags

• Telemetry: Improve dev cancellation handling

• Telemetry: Send index stats on dev exit

• UI: Allow showing or hiding the addon panel

• UI: Improve sidebar empty state

• UI: Improve syntax-highlighter bundling

• Update: Satellite repos after major version bump

• Upgrade: Enhance ESM compatibility checks and banner generation

• Upgrade: Packages `open`

• Upgrades: Packages `boxen` `commander` `giget`

• Vite: Optimize @storybook/addon-docs/blocks dependency

• Highlight: Prevent menu items from emitting arbitrary channel events

• Channels: Restrict preview postMessage to known manager origins

• Core: Separate manager and preview roles on the dev server channel

• Core: Block iframe embedding of the dev server from non-localhost origins

• Core: Reject component search queries outside the project

• Core: Validate component export name when creating a story

• Core: Add host validation warning and origin validation for MCP

• Core: Contain save story path to the project root

• Core: Validate save story name and arg keys as identifiers

• Addon Vitest: Disable browser file writes and command execution

• Automigration: Improve the viewport/backgrounds automigration

• Mocking: Fix `sb.mock` usage in Storybook's deployed in subpaths

• NextJS-Vite: Automatically fix bad PostCSS configuration

• React Native Web: Fix REACT_NATIVE_AND_RNW should detect vite builder

• Telemetry: Add metadata for react routers

• React: Preserve @ts-expect-error in preview

• Telemetry: Queue error reporting & filter browser-extention

• CLI: Capture the version specifier used in create-storybook

• Instrumenter: Fix userEvent.type performance regression

• React Native Web: Fix RNW peer dependency version

• Telemetry: Record known CLI integrations

• Angular: Properly merge builder options and browserTarget options

• Core: Optimize bundlesize, by reusing internal/babel in mocking-utils

• Svelte & Vue: Add framework-specific docgen option to disable docgen processing

• Svelte: Support @sveltejs/vite-plugin-svelte v6

• Mock: Catch errors when transforming preview files

• Next.js: Fix version mismatch error in Webpack

• Telemetry: Disambiguate traffic coming from error/upgrade links

• Telemetry: Disambiguate unattributed traffic from Onboarding

• Addon Docs: Fix Symbol conversion issue in docs page and controls panel

• Angular: Fix entry.polyfills undefined error

• Angular: Inherit options from browserTarget

• Core: Improve addon detection in automigrations on windows

• Next.js: Return mocked router instead of actual router in useRouter

• Telemetry: Improve dev cancellation handling

Storybook 9.1 is packed with new features and improvements to enhance accessibility, streamline testing, and make your development workflow even smoother!

🚀 Improved upgrade command with monorepo support for seamless upgrades
🅰 Angular fixes for Tailwind 4, cache busting, and zoneless compatibility
🧪 sb.mock API and Automocking: one-line module mocking to simplify your testing workflow
🧪 Favicon shows test run status for quick visual feedback
⚛️ Easier configuration for React Native projects
🔥 Auto-abort play functions on HMR to avoid unwanted side effects
🏗️ Improved CSF factories API for type safe story definitions
♿️ A11y improvements across Storybook’s UI — addon panel, toolbar, sidebar, mobile & more
💯 Dozens more fixes and improvements based on community feedback!

List of all updates

• A11y: Improved toolbar a11y by fixing semantics

• Addon Vitest: Remove Optimize deps candidates due to Vitest warnings

• Angular: Bundle using TSup

• Angular: Prevent directory import in Angular builders

• Automigration: Await updateMainConfig in removeEssentials

• Builder-Vite: Fix logic related to setting allowedHosts when IP address used

• Controls: Improve the accessibility of the object control

• Core: Abort play function on HMR

• Core: Avoid pausing animations in non-Vitest Playwright environments

• Core: Cleanup of type following up v9 and small verbatimModuleSyntax type fix

• Core: Fix aria-controls attribute on sidebar nodes to include all children

• Core: Fix horizontal scrollbar covering part of the toolbar

• Core: Fix moving log file across drives and projectRoot detection on Windows

• Core: Prevent interactions panel from flickering and showing incorrect state

• Core: Serve dynamic favicon based on testing module status

• Core: Support container queries in addon panels

• CSF Factories: Add parameters/globals types, extend API, portable stories

• CSF: Improve controls parameters

• CSF: Improve docs parameter types

• CSF: Only add preview annotations to definePreview in csf-factories automigration

• Init: Exclude mdx stories when docs feature isn't selected during init

• Maintenance: Add flag to toggle default automigrations

• React Native Web: Simplify config by using vite-plugin-rnw

• Telemetry: Add automigration errors

• Telemetry: Fix project.json for getAbsolutePath

• UI: Apply user updates for mobile navigation accessibility

• UI: Fix interaction step collapse icon

• UI: Visual focus indicators (VFIs) aren't visible in high contrast mode (rebase)

• Automigration: Fail with non-zero exit code on migration failure

• CLI: Fix sb CLI by explicitly exporting bin/index.cjs from storybook package

• Core: Fix issue where collapsed test controls can be tabbed into

• Core: Various fixes

• Ember: Allow ember v5 as peer deps

• Next.js: Upgrade sass-loader to 16.0.5

• NextJs-Vite: Enable next/font loading when using next-vite

• Portable stories: Fix playwright CT to allow functions to be passed as props

• UI: Set color scheme to sync scrollbar color with user-selected theme

• CLI: Do not fail incompatible package check in doctor if only core packages used

• CLI: Prebundle more in cli-storybook package

• Core: Fix FIPS compliance

• Core: Fix addon scrollbars and align scrollbar colors with toolbars

• UI: Hide keyboard shortcuts entry from menu when shortcuts are disabled

• Core: Gracefully handle disallowed cross-origin clipboard access

• Core: Support array-based catch-all Next.js route segments in AppRouterProvider

• Next.js-Vite: Support Next.js v15.4

• React Native Web: Fix shift spread operator in react-native-web-vite presets

• Telemetry: Fix prompting without checking isTTY

• Vite: Remove addon-themes and theming from optimized deps list