Skip to content
Storybook 7.0🎁 Claim $500 credit to Chromatic with code DAY


Times below are shown in your local browser's time zone
👋 Welcome to Storybook Day
We’ll kick things off with a short look back at the history and evolution of Storybook and its impact on the front-end ecosystem. We'll examine how Storybook has grown from a tool for isolated component development to one that enables collaboration between developers, designers, and product managers. Even expanding to include UI testing workflows.
Michael Chan
Michael Chan
DX at Chromatic
Dominic Nguyen
Dominic Nguyen
Co-founder at Chromatic
Storybook 7.0
🏗️ Foundational changes
Storybook 7.0 is our largest update to date! It has been re-engineered for better performance and reliability, featuring hundreds of enhancements. In this session, Michael will discuss some of the core changes: a design refresh, Component Story Format 3 (CSF3), and improved type safety for stories.
⚡ Performance
Starting with 7.0, Storybook will be shipped as a compiled codebase, resulting in reduced install weight and faster start times. Storybook 7.0 also provides first-class support for Vite, offering automatic configuration. Join Ian to learn all about pre-bundling and improvements to the Vite builder.
📝 Docs revamp
Storybook 7 is here to make your project's UI documentation easier than ever. With MDX 2 support, a new architecture, a streamlined UX, and readymade doc blocks, you can quickly create and maintain your project's documentation.
🧪 Testing components
Storybook lets you simulate user behavior, such as clicks and inputs, by attaching play functions to stories. Yann will demonstrate how to write such stories and use the Storybook test runner to transform them into executable tests. Also, you'll learn how to uncover untested edge cases with coverage reports.
🧩 Compatibility
Kyle will cover the new Framework API, which streamlines integrations. This API unlocks zero-config support for more tools, allowing packages to automatically configure Storybook to work with popular application setups like NextJS and SvelteKit.
🚦 Stability
Storybook 7 is our first major update in two years, bringing a lot of changes and new features. To make upgrades easier, we've set up an "early warning system" to test Storybook against a broad matrix of configurations. Michael will explain how the Storybook team use this Ecosystem CI to protect users from package upgrade headaches and ensure a smooth migration.
🥪 Break
🌐 Ecosystem
Updates to the Storybook Ecosystem
Storybook has an active ecosystem, with add-ons for styling, state management, testing, accessibility, design tools, project management, and more. Shaun will provide an overview of how we're expanding this ecosystem with recipes. You'll also discover how Storybook has partnered with other tools, such as Nx, Figma, Vite, and Zeplin, to enhance integrations.
Storybook 7 in monorepos with Nx
Monorepos enable you to store multiple packages, such as your app and design system, in a single repository. This makes it easier to work on them simultaneously. Katerina will demonstrate how to use Storybook in monorepos managed with Nx. You'll learn about the Nx-Storybook plugin, which can quickly configure Storybook within a package.
💼 Use cases
Storybook use cases
Thousands of companies love Storybook. It's used to build design systems, test UIs, publish documentation for open-source libraries, conduct design reviews, and gather feedback from stakeholders, among many other possibilities. Lisa kicks off this segment which looks at how teams utilize Storybook.
Who owns this component? ItDepends!
Working out who owns a component, or where a component is used, can be really challenging in a complex design system. At the BBC, many different teams within their Design System Community maintain components, and with so many components, this task can seem almost impossible. In this session, Natalia explains how they solved this by creating ItDepends: an add-on which automatically generates data about component dependencies.
How uses Storybook for UI development
Teams at use Storybook to manage monoliths, micro frontends and design systems. Each micro frontend has its own Storybook, which is run through CI/CD checks using Chromatic to help prevent bugs from entering production. In this session, Orr explains how Storybook has enabled to accelerate and enhance their UI development process.
2x faster feature development with Storybook, mirage and interactions
Intuit builds products used by more than 100 million customers worldwide, such as QuickBooks, TurboTax, Mint, and Mailchimp. The platform is built on a powerful micro frontend architecture that allows teams to rapidly build and ship individual product features. Christopher will show you how they've leveraged Storybook to build whole features in isolation, helping developers fix bugs quickly, simulate hard-to-reproduce scenarios like server errors, and reduce excessive time spent setting up test data.
Conquer Style Bleeding with the CSS Chaos Addon
Have you ever built components that look great on their own but face styling challenges when integrated into consumer applications? This common issue related to style bleeding can lead to time-consuming bug hunting and added development costs. Join Alex to learn about the CSS Chaos Addon, a tool that can improve the defensive styling of your components and enhance the developer experience for those using them in their applications.
Storybook at the Guardian
Join Oliver as he shares how the Guardian uses Storybook and Chromatic across product and engineering. You'll learn how to use Storybook to protect yourself against visual regressions and how to use it as a platform for testing and reviewing changes in collaboration with UX and Design.
Cultivating a Digital Garden in Storybook
Explore component-driven development and Storybook’s powerful features as we create a lush SVG botanical landscape. You’ll learn how to use the fundamentals of Storybook to express creative coding ideas. Our “Digital Garden” will be composed from the smallest stories (seeds and buds), and combined together to create an animated design system.