@storybook/react

• Angular: Fix sourceDecorator to apply excludeDecorators flag

• Core: Do not prebundle better-opn

• Core: Do not prebundle jsdoc-type-pratt-parser

• Next.js: Upgrade sass-loader from ^12 to ^13

Fresh out of the oven! Storybook 8.3 brings you:

• ⚡️ First-class Vitest integration to run stories as component tests

• 🔼 Next.js-Vite framework for Vitest compatibility and better DX

• 🗜️ Further reduced bundle size for a smaller install footprint

• 🌐 Experimental Story globals to standardize stories for themes, viewports, and locales

• 💯 Hundreds more improvements

List of all updates

• Addon Test: Improve messages and post install script handling

• Addon Viewport: Add default options via parameters

• Addon Test: Add experimental vitest integration

• Addon Test: Fix error message logic in set up file

• Addon Test: Fix indentation of 'vitePluginNext' in generated Vitest config file

• Addon Test: Fix postinstall file types

• Addon Test: Fix tests potentially not existing in non-isolate mode

• Addon Test: Set default viewport if applicable

• Addon Test: Set screenshotFailures to false by default

• Addon Docs: Remove babel dependency

• Addon Interactions: Fix status in panel tab

• Angular: Fix Angular template error for props with a circular reference

• Angular: Fix template props not able to use dot notation

• Backgrounds/Viewports: Make defaults overridable in StoryGlobals-mode

• Blocks: Fix scroll to non-ascii anchors

• Builder-Vite: Add null character prefix to virtual file IDs

• Builder-Vite: Fix 'condition node never be used' warning

• CLI: Add conditional logging for manager and preview start

• CLI: Fix dedent import in package managers

• CLI: Fix the initialization of Storybook in workspaces

• CLI: Handle Yarn PnP wrapper scenario when adding an addon

• CLI: Make PackageJson optional for starting a dev server

• CLI: Update spawn options in proxy.ts to support Windows

• Components: Remove external overrides

• ConfigFile: Fix as const satisfies modifiers

• Controls: Add disableSave parameter

• Core: Add Rsbuild frameworks to known frameworks

• Core: De-duplicate babel use in core

• Core: Fix header for MountMustBeDestructuredError message

• Core: Fix manager-builder tsconfig to emit react-jsx

• Core: Introduce setProjectAnnotations API to more renderers and frameworks

• Core: Make sure CJS build always has lowest prio

• Core: Move util to regular dependency

• Core: Split Storybook CLI

• Core: Upgrade docs-mdx for smaller install

• CPC: Add ESM export to docs-tools & node-logger packages

• CPC: Fix missing dependency in @storybook/addon-interactions

• CPC: Fix type generation

• CPC: Revert renames of panels, addon_ids

• CSF: Allow overridding globals at the story level

• Dependencies: Upgrade commander

• Add header for MountMustBeDestructuredError message

• Prevent iframe from capturing mouse events in composed Storybooks

• Maintenance: Add node:-prefix to node core-modules

• Maintenance: Rename addon-vitest to addon-test

• Next.js-Vite: Fix vite plugin exports

• Next.js-Vite: Streamline Next.js dir option

• Next.js-Vite: Update next and vite-plugin-storybook-nextjs dependencies

• Next.js: Add @storybook/nextjs-vite package

• Next.js: Fix wrong Next.js framework reference

• Next.js: Make RSC portable-stories compatible

• Next.js: Update dependencies

• Nextjs-Vite: Re-export vite-plugin-storybook-nextjs

• Portable Stories: Improve Handling of React Updates and Errors

• React: Avoid 'Dynamic require of react is not possible' issue

• React: Bundle in lodash

• Svelte: Fix events not being logged in Actions when a story has decorators

• SvelteKit: Introduce portable stories support

• SvelteKit/Vue3: Refactor plugin export paths

• Telemetry: Add globals stats

• Telemetry: Add portable stories

• Types: Adjust beforeAll to be non-nullable in NormalizedProjectAnnotations

• Types: Update type signatures of objects and functions

• UI: Fix collapse/expand all functionality

• UI: Fix conditional hooks usage in sidebar

• UI: Fix sidebar not wrapping

• Vite: Fix HMR

• Vite: Fix missing source map warning

• Vitest: Fix add command

• Vitest: Fix default viewport

• Vitest: Implement add command for vitest addon

• Vue: Add missing prop controls when using vue-component-meta docgen plugin

• Vue: Improve generated code snippets

• Vue3: Add vite plugin for portable stories

• CPC: Add the globals export for manager

• CPC: Correct path to the @storybook/theming/create alias

• Components: Remove external overrides

• Core: Fix header for MountMustBeDestructuredError message

• Onboarding: Fix code snippet when story name differs from export name

• Telemetry: Add mount, beforeEach, moduleMock stats

• Telemetry: CSF feature usage

• Bug: Fix invalid docs links in Configure.mdx template page

• CLI: Add "missing-storybook-dependencies" automigration

• CPC: Add theming/create aliases in docs preset

• CPC: Fix incorrect re-export in core-events

• CPC: Fix Vite builder had wrong conditions

• CSF: Fix small typing issue

• Portable stories: Remove unused types

• Webpack: Fix sourceMap generation in csf-tools

Hold onto your hats! Storybook 8.2 has dropped, packed with a treasure trove of new features and bug fixes:

• 🪝 New test hook beforeAll

• 🕹️ Enhanced play function

• 📦 Portable stories that let you use your stories in other testing tools

• 🎁 Consolidated dependency to bring you better performance in a smaller package

• ✨ Brand new onboarding experience to get you up to speed quicker

• 💯 Hundreds more improvements

List of all updates

• Addon Controls: Fix saving on Windows

• Addon Interactions: Use unique keys when rendering array nodes in panel

• Addon Onboarding: Add icons for dev/test/doc to the splash screen

• Addon Onboarding: New design and flow based on Save from Controls

• Addon Onboarding: Trigger onboarding during init for Vue and Angular projects

• Addon-A11y: Fix property default assignment

• Angular: Allow format configuration of custom source preview

• Angular: Allow outputPath object syntax

• Angular: Cleanup types

• Angular: Fix enableProdMode setting

• Angular: Fix wrong detection of standalone components

• Angular: Introduce preserveSymlink builder option

• Angular: Update outputPath default value in angular-cli-webpack.js

• Babel: Ensure story files not transpiled earlier than ES2017

• Blocks: Fix reference to storybook core

• Blocks: Prebundle tocbot

• CLI: Add --no-dev option to init

• CLI: Add optional --dev and --no-dev options to storybook init CLI

• CLI: Add support for Nuxt to project init

• CLI: Fix CLI always asking all automigrations

• CLI: Improve error message when fetching CLI version

• CLI: Include @storybook/addon-svelte-csf when initializing new projects

• CLI: Prebundle get-npm-tarball-url and @ndelangen/get-tarball

• Config: Apply JavaScript-only story glob extensions for JavaScript projects

• Controls: Fix date picker control validation and assignment

• Controls: Fix grouped Radio controls to have the same name

• Controls: Throttling makes Color control lagging

• Core: Add context as a property of the context (self-referencing)

• Core: Add support for beforeAll hook

• Core: Fix startup hang caused by watchStorySpecifiers

• Core: Make sure StorybookError message shows up in browser console and interactions panel

• Core: Migrate from pkg-dir to fd-package-json

• Core: Refactor phases to run in order loading -> rendering -> playing

• Core: Remove more .stories.mdx handling

• Core: Remove util dependency

• CPC: Add CJS for core/components

• CPC: Core Package Consolidation

• CSF: Automatically extract componentPath

• CSF: Rename preview.js globals to initialGlobals

• Dependencies: Allow esbuild version 0.21.x

• Dependency: Bump Express.js

• Dependency: Remove node-fetch

• Docs-tools: Replace doctrine with jsdoc-type-pratt-parser

• Index: Fix MDX to override project-level autodocs

• Indexer: Improve locating stories with specials chars in path

• Next: Set default targets for next babel config

• Next.js: Set env.bugfixes in SWC so destructuring is never transpiled

• React: Export ButtonProps and HeaderProps in CLI templates

• SWC: Set default targets for swc that align with our esbuild targets

• Telemetry: Stop prompting about crash reports in CI

• Types: Fix type implementation for CompatibleString

• Vite: Fix asset warning by externalizing sb-common-assets font

• Vue3: Enable new hydration mismatch compile time flag

• Webpack5/Vite: Fix sourcemaps

• Telemetry: Detect Node version

• Addon-interactions: Fix deprecation warnings

• Addon-actions: Only log spies with names

• Portable Stories: Add tags to composed story

• CLI: Only log UpgradeStorybookToSameVersionError but continue upgrade as normal

• Core: Replace ip function with a small helper function to address security concerns

• Tags: Fix unsafe project-level tags lookup

• Vite: Fix stats-plugin to normalize file names with posix paths

• CSF-Tools: Fix export specifier bug

• Dependency: Upgrade tempy

• Tags: Refine composition behavior

• Theming: Fix self-referencing type

• Angular: Revert style adjustments

• Svelte: Support latest prerelease

• Tags: Fix composition with older storybooks

• Vite: Fix HMR issue for Storybook preview files

• Docgen: Only add react-docgen info when a component is defined in the file

• Next.js: Add typing for NextImage to main framework options type

• Next.js: Avoid conflicts with the raw loader

• Types: Fix typing for main.framework/builder fields

Storybook 8.1 is here with a ton of new features and bug fixes:

• 🏷️ Static tag-based filtering

• 🦺 Type-safe, standards-based module mocking

• 🐣 New beforeEach test hook

• 🧳 Portable Stories API for Playwright Component Testing

• 🐕‍🦺 Support the new signal-based input & output functions in Angular

• 2️⃣ Two new ways to create stories: generating them from story controls or from your components directly!

List of all updates

• Addon-actions: Fix falsy args printing as object - 22163

• Addon-docs: Fix MDX compilation with @vitejs/plugin-react-swc and plugins

• Addon-docs: Fix providerImportSource extension

• Addon-docs: Fix react-dom/server imports breaking stories and docs

• Addon-docs: Support Stencil based display names in source snippets

• Addon-docs: Fix [Object object] displayName in some JSX components

• Angular: Add type support for Angular's input signals

• Angular: Add type support for Angular's output signals

• API: Add API access to sidebar renderLabel

• Args: Add possibility to mark controls as read-only

• Automigrations: Fix name of VTA addon

• Automigrations: Add migration note about new react-docgen default

• Automigrations: Fix missing support for mts vite config

• Automigrations: Improve react-docgen automigration prompt

• Blocks: Add of prop to Subtitle

• Blocks: Add of prop to Title

• CLI: Add --config-dir flag to add command

• CLI: Add --config-dir flag to migrate command

• CLI: Add main.js docs.autodocs automigration

• CLI: Add Visual Tests addon install auto-migration when upgrading to 8.0.x

• CLI: Automigrate improve upgrade storybook related packages

• CLI: Automigrations copy edits

• CLI: Fix eslint configuration for string extends

• CLI: Improve Yarn berry error parsing

• CLI: Improve vite-config-file.ts

• CLI: Instruct the correct auto-migration command

• CLI: Introduce package manager fallback for initializing Storybook in an empty directory with yarn1

• CLI: Throw an error when running upgrade command in incorrect cwd

• Codemods: Escape filename given as argument

• Controls: Add Channels API to search for files in the project root

• Controls: Added server channel to create a new story

• Controls: Add UI to create new story files

• Controls: Fix crashing when docgen extraction partially fails

• Controls: Fix disable condition in ArgControl component

• Controls: Fix number controls do not reset

• Core: Add duration and onClick support to Notification API and improve Notification UI

• Core: Drop unneeded UPDATE_STORY_ARGS which was for SSv6

• Core: Ensure that simultaneous onStoriesChanged don't clobber each other

• Core: Fix filters not being applied in WebKit

• Core: Fix preloading too early

• Core: Implement file formatter

• Core: Optimize clearNotification

• Core: Save from controls

• CSF: Allow default export without title or component attributes

• CSF: Fix typings for control and other properties of argTypes

• CSF: Make sure loaders/decorators can be used as array

• Dependencies: Bump es-module-lexer

• Dependencies: Update globby dependency

• Dependencies: Update postcss-loader in Next.js framework

• Doc Tools: Signature Type Error Handling

• Indexer: Escape special characters in storyImport regex

• Maintenance: Fix performance regressions

• MDX: Do not transform http:// links

• Next.js: Fix Compatibility with <v14.0.4

• Next.js: Fix next/font usage on Windows machines

• Next.js: Move sharp into optional deps

• Next.js: Support v14.2 useParams functionality

• Next.js: Implement next redirect and the RedirectBoundary

• Next.js: Support path aliases when no base url is set

• Node: Safe use of document for preview

• Onboarding: Improve UI

• Portable stories: Introduce experimental Playwright CT API and Support for more renderers

• Portable stories: Make setProjectAnnotations accept multiple types of imports

• Portable Stories: Remove link to missing docs

• Portable Stories: Warn when rendering stories without cleaning up first

• React-Docgen: Make sure to be able to handle empty unions

• React: Support v19 betas in peer dependencies

• React: Support v19 in react-dom-shim

• Tags: Add project tags, negation, dev/autodocs/test system tags

• Tags: Fix missing default tags if no preview.js

• Theming: Update emotion dependencies

• Typescript: Add types for experimental-playwright entries without type:bundler

• UI: Add key property to list children in Highlight component

• UI: Fix not re-rendering tabs on state change

• UI: Fix panel layout resizing do not apply when done too fast

• UI: Fix search result color contrast

• UI: Fix sidebar search hanging when selecting a story in touch mode

• UI: Fix theming of elements inside bars

• UI: Improve empty state of addon panel

• UI: Replace the icon prop in the Manager API

• Viewport: Fix missing style

• Vite: Merge assetsInclude property with Storybook default values

• Vue: Disable controls for events, slots, and expose

• security

  Webpack: Bump webpack-dev-middleware to patch high security issue

• Webpack: Fix sourcemap generation in webpack react-docgen-loader

• Webpack: Hide runtime errors

• Addon-docs: Fix MDX compilation when using @vitejs/plugin-react-swc with plugins

• CSF: Fix typings for control and other properties of argTypes

• Controls: Fix crashing when docgen extraction partially fails

• Doc Tools: Signature Type Error Handling

• Next.js: Move sharp into optional deps

• Nextjs: Support next 14.2 useParams functionality

• UI: Fix sidebar search hanging when selecting a story in touch mode

• CLI: Add Visual Tests addon install auto-migration when upgrading to 8.0.x

• Next.js: Move sharp into optional deps

• Vue: Disable controls for events, slots, and expose

• security

  Webpack: Bump webpack-dev-middleware to patch high security issue

• CLI: Add --config-dir flag to migrate command

• Next.js: Fix next/font usage on Windows machines

• Next.js: Support path aliases when no base url is set

• Webpack: Fix sourcemap generation in webpack react-docgen-loader

• Addon-docs: Fix react-dom/server imports breaking stories and docs

• Automigrations: Fix missing support for mts vite config

• CLI: Improve Yarn berry error parsing

• React-Docgen: Make sure to be able to handle empty unions

• Viewport: Fix missing style

• Addon Docs: Fix [Object object] displayName in some JSX components

• CLI: Add yarn1 package manager fallback for init in empty directory

• CSF: Make sure loaders/decorators can be used as array

• Controls: Fix disable condition in ArgControl component

• UI: Add key property to list children in Highlight component

• UI: Fix theming of elements inside bars

• UI: Improve empty state of addon panel

• Controls: Fix type summary when table.type unset

• Core: Fix addon bundling script

• Core: Fix fail to load main.ts error message

• Maintenance: Fix performance regressions

Storybook 8.0 is here

It brings major improvements to Storybook's feature set for testing and documentation, with strengthened framework support across React, Vue, Angular, web-components, Svelte, and more.

• 🩻 Built-in visual testing

• ⚛️ React Server Component support

• 🎛️ Improved controls for React and Vue projects

• ⚡️ Improved Vite architecture, Vitest testing, and Vite 5 support

• 🧪 2-4x faster Storybooks for testing

• ✨ Refreshed desktop UI

• 📲 Rebuilt mobile UX

• 🙅‍♀️ No more React requirement in non-React projects

Please checkout our Migration Guide to upgrade from earlier versions of Storybook. To see a comprehensive list of changes that went into 8.0, you can refer to the 8.0 prerelease changelogs.

Thank you to all the contributors that made Storybook 8 possible 💖 @0916dhkim @1234tgk @43081j @aditya1 @adityakrmodak @agriffis @ai @alitas @almoghaimo @amerlander @andarist @anneau @artur93gev @arunoda @arup1221 @atreay @auctumnus @bashmish @bdriguesdev @benmccann @bkfarnsworth @bodograumann @bryanjtc @cdedreuille @cgatian @chakas3 @chocoscoding @coliff @cprecioso @danez @danielmarcano @dannyhw @dartess @darth-koder007 @daves28 @decherneyge @devanandb @devazc @diamondex @domyen @dotwoodmedia @dprcoles @drik98 @dschungelabenteuer @dubbs @edutoit @efrenaragon96 @epreston @felixrizzolli @fezvrasta @filiptammergard @flambe @francois2metz @g-cappai @githrdw @gitstart @gossi @greut @gufah @halitiince @hcvdhaar @henkerik @hobbes7878 @hoishin @honzahruby @iabu94 @ianvs @idesigncode @iqbalcodes6602 @irangarcia @ivoilic @j3rem1e @jackw @jared-christensen @joaonunomota @joekarow @joevaugh4n @joeycozza @johnhunter @jonniebigodes @jonthenerd @joriswitteman @joshbolduc @jpzwarte @jreinhold @json-betsec @julien-deramond @junghoe @kaelig @karolstawowski @kasperpeulen @kawokas @kbazilio @kkirby @klescouar @kolife01 @kota-kamikawa @kripod @kshmidt-digma @ksugawara61 @kubijo @kuriacka @kylegach @kylemeenehan @kyletsang @larsrickert @legnaleurc @leniwen @literalpie @lucavazz @luk-z @machycek @maheshchandra10 @manbearwiz @mandarini @mariasimo @mariocadenas @marklb @martinnabhan @masaya48 @mastrzyz @mattlewis92 @mauriciorobayo @mdornseif @medihack @mh-ahs @michens @mickmcgrath13 @miily8310s @mlazari @mrzillagold @mvarendorff @naporin0624 @nasvillanueva @natehouk @ndelangen @nikospapcom @nilsjacobsen @nkabrown @nlepage @notwoods @noviceguru @nsheaps @nvitius @omahs @orangecms @oruman @osnoser1 @paoloricciuti @pascalfiv @piratetaco @pruthvip15 @pure-js @rashidshamloo @re-taro @redbugz @reyronald @roel-t @rohanpoojary1107 @roottool @rwaight @samvv @seriouz @shaunevening @sheriffmoose @shilman @showrin @sidnioulz @sitogi @sjwilczynski @smeagol74 @sookmax @specialdoom @speelbarrow @spookyjelly @stegano @stilt0n @stof @stropitek @subhajit20 @syabro @t99 @taehyeon-envoi @taozhou-glean @tap-kim @thapasusheel @thisisanto @thtliife @tmeasday @tolkadot @tomo5524 @tsvanharen @turtle601 @tusharwebd @ubugnu @unional @usrrname @valentinpalkovic @vanessayuenn @vmizg @webblocksapp @wesgro @wilson2k @wise-introvert @wjdtjdgns @wouterk12 @wuzhuobin @xueyawei @xyy94813 @yannbf @ygkn @yilun-sun @yoshi2no @yossisaadi @youngboy @zachtball @zmarkan