The more components you have the harder it is to find what you need.
It’s unwieldy to manage hundreds of components and thousands of stories. The new component finder and sidebar in 6.1 is purpose built to help developers navigate large component libraries.
- 🔍 Find components fast with fuzzy search
- 🔄 Jump between recently opened components
- 🔭 Expand and collapse all nodes
- ⚡️ Snappier UI with keyboard navigation
Storybook was originally designed for small component libraries. When it launched in 2016 React, Vue, and Angular were new. Best practices on building and managing components didn’t exist yet.
Over the years, Storybook evolved. It became the most popular tool for design systems. Used by folks like Adobe, Shopify, and GitHub.
Today, teams use Storybook to build entire UIs in isolation: starting with components and ending with pages. Global brands like BBC and The Guardian maintain thousands of stories. Storybook’s developer experience needs to scale along with them.
Find components faster
6.1 introduces a re-engineered search experience. Large component libraries are tough to navigate because you lose track of where components are.
The finder helps you locate components by indexing their name and path.
Results appear as you type. When a result matches your query, Storybook highlights the string that it matches on. If there are typos, “fuzzy matching” still shows you the right results.
View recently opened components
Jump between components you’re working on with the “recently opened” view. Storybook keeps a history of the components you open and displays them for quick access when you open finder.
Developers often look at a component and its dependents to check for bugs. For example, when developing a
CreditCardForm you’ll also want to check its integration on the
BillingPage. These components are now a click away.
Expand and collapse the component tree
Expand all nested folders in a given “root” (the top level of component organization). Advanced teams use folders to organize Storybook. But in large libraries it’s tedious to open folders one-by-one to view their contents. Now you can open all folders recursively in one click.
This is particularly useful when there are many subfolders. For example, it used to take 4 clicks to reach the end of this path:
/screens/../../AboutScreen. It now takes two clicks.
In addition, keyboard navigation helps you browse components without leaving your hand position.
Try it now
Try the new finder and sidebar by upgrading to Storybook 6.1.
npx sb upgrade
Professional UI developers rely on Storybook every day. Our goal is to streamline common flows so that you can build more with less work.
Storybook is maintained by 1,176+ open source contributors and guided by a steering committee of top maintainers. If you are interested in contributing, check out Storybook on GitHub, create an issue, or submit a pull request. Donate on Open Collective. Chat with us in Discord — a maintainer is usually online.
Stay up to date with Storybook news on Twitter and by signing up for our mailing list.