Storybook 7.0 design sneak peek

Visual updates, UX tweaks, and faster performance

loading
Dominic Nguyen
@domyen

Every morning thousands of developers spin up Storybook to start the work day. Storybook underpins the frontend workflow of Netflix, Adobe, and the European Union.

But with growing usage, comes more exposure to UX edge cases and inconsistencies. For the past 3 years, we’ve researched usability and collected UX feedback.

I’m thrilled to share a sneak peek of Storybook 7.0’s design. It refreshes the core UI patterns so that you can build more with fewer clicks, shorter mouse travel, and less waiting.

  • 📐 Layout expanded to increase usable real estate
  • 🛠 Toolbar organized for discovery
  • ✍️ Icon set redrawn and lighter weight
  • 🔢 Form elements refined
  • ⚡️ Performance overhaul

Why now?

Before we begin, it’s worth mentioning that 7.0 doesn’t redesign the wheel. Storybook’s popularity is a testament to the current battle-tested developer experience. The team wouldn’t do anything to mess that up.

Storybook’s design was last revamped in 2019 by me and Norbert de Langen. Back then, it was only a tool for building UI components in isolation. As the community blossomed, so too did Storybook’s capabilities in UI documentation and testing.

This history of Storybook's UI

These days, countless teams like Microsoft, Shopify, and Monday.com rely on Storybook to ship durable UIs around the world.

But with Storybook’s expanded features, it was inevitable for the community to stumble on visual inconsistencies and subtle bugs over the years. 7.0’s design addresses this accumulated feedback and lays the foundational UI patterns for Storybook’s future.

As a user, you’ll get a polished new UX atop a familiar workflow.

Meet the new look in 7.0

7.0 dedicates more screen space to Canvas – the iframe where components are developed in isolation. Canvas size was increased by 3.5% to give you more freedom to express all the dimensions of your UI.

When you spend hours in Storybook like I do, the more pixels dedicated to development, the more efficient it is to do your job.

Storybook 7.0 UI

The Canvas toolbar includes tools that help you spot check the UI implementation. The tools are now organized to group similar actions together which ends up reducing how much you have to move the mouse (or tab for keyboard users).

We also added a “Reload” tool that reloads the currently selected story. This is useful when you want to reload the component without refreshing the entire browser.

Storybook 7.0 comes with both a light and dark theme. Our theming API remains the same so any tweaks to theme variables from 6.X are also portable to 7.0.

Light and dark modes

Made for you to reuse

Customization is one of the top reasons for Storybook’s popularity. There are over 400 addons in the community. In 7.0, integrators will get more access to the design patterns we use to develop Storybook itself.

7.0 includes 196 icons for you to reuse in your own projects. Each icon was redrawn from the ground up to improve sharpness and recognizability. The set was also expanded by 20 icons to capture emerging functionality from the community. The complete set is 46% lighter.

Storybook icon set for you to reuse

Form components like Toggle and Slider adhere to the updated design language. You’ll notice this most in the Controls addon. Reuse these components in your own addons by importing them from @storybook/components.

Updated forms

Performance drives design

Storybook 7.0 doesn’t just look new, it feels new. The most efficient way to speed up dev workflows is to supercharge Storybook itself.

7.0 pre-bundles Storybook to give you instant start times and sidestep dependency conflicts. Each dependency was audited to further reduce bundle size.

When combined with the performance improvements in 6.X releases (below), 7.0 starts fast and stays fast – even as teams write thousands of stories.

  • 7.0 Instant start: Pre-bundle the manager & optimize dependencies
  • 6.5 Faster module reload: Webpack 5 Lazy Compilation & official Vite builder
  • 6.4 Faster load times: Code splitting for published Storybooks
  • 6.3 Future-proof: ESM support and Webpack 5 stable
  • 6.2 Extensible: re-architected Storybook to support modern builders such as Webpack 5 and Vite
  • 6.1 Faster startup: dropped Webpack DLLs and started pre-building & caching the manager

Sign up for early access

7.0 design is in active development – what's in the sneak peek here is only the first stroke. We need your help and feedback to bring the designs to life, especially during the early access period. Sign up to Storybook’s mailing list below to get notified of project updates.

Have ideas for Storybook’s user interface? Join us in Storybook’s Discord chat #design. We welcome contributions from new developers and veterans alike.

The 7.0 design is developed by Michael Arestad and Dominic Nguyen (me!) with feedback from the entire Storybook community.

Join the Storybook mailing list

Get the latest news, updates and releases

5,663 developers and counting

We’re hiring!

Join the team behind Storybook and Chromatic. Build tools that are used in production by 100s of thousands of developers. Remote-first.

View jobs

Popular posts

Writing stories in TypeScript

Learn how to type your stories to make them easier to code and more robust
loading
Kyle Gach
Docs
Documentation
Add Storybook to your project in less than a minute to build components faster and easier.
reactvueangularweb-components
Tutorial
Tutorials
Learn Storybook with in-depth tutorials that teaches Storybook best practices. Follow along with code samples.
Storybook
The MIT License (MIT). Website design by @domyen and the awesome Storybook community.
StorybookShowcaseDocsTutorialsAddonsBlogReleasesGet involvedUse casesSupportTelemetryTeam
Subscribe
Get news, free tutorials, and Storybook tips emailed to you.

Maintained by
Chromatic
Continuous integration by
CircleCI
Hosting by
Netlify