Component Encyclopedia beta

Frontend development is tougher than ever. UIs have dozens of intertwined requirements that range from browser compatibility to render speed and everything in between.

If you’re a developer like me, it can be confusing to know what’s the best practice for any given UI pattern. The web changes fast and people have a lot of opinions. The clearest way to see what works is to reference what others do.

In December, I previewed the Component Encyclopedia, a catalog of battle-tested components for you to learn from. I’m excited to share that we’re now in beta. Thanks to the community, we indexed 3,490 components across 44 projects so far.

📚 Go to the beta site now or continue on to the highlights below.

Who uses Storybook?

Customization is one of the top reasons for Storybook’s popularity. It’s flexible enough to fit the shape of any organization. Multinational companies use it to keep track of innumerable edge cases in their apps. Startups and solo developers use it to assemble UIs faster.

Component Encyclopedia showcases UI components from leading teams at the BBC, European Union, Microsoft, and more. That gives you a comprehensive overview of prior art to learn from. Join me now for a tour of inspiring projects coming to the encyclopedia.

News & broadcasting companies

Newspapers seek to inform people through journalism and investigation. These days, the “paper” in “newspaper” is a misnomer because most news is delivered online. Developers of news sites must support a variety of content like text, video, audio, and interactive formats. In addition, they must consider usability on legacy devices and slow connections.

BBC

BBC is the oldest and largest broadcaster in the world. Their audience spans 456 million people which means content must be localized for dozens of countries. BBC Psammead design system uses Storybook to build a durable component library that’s accessible, internationalized, and performant.

The Guardian

The Guardian is one of the most trusted newspapers in the United Kingdom. It covers a broad variety of topics. To provide the best reading experience, The Guardian’s page layouts need to be resilient to every content type yet remain customizable. Storybook is used to build the entire UI, from component to page, in isolation from the content management system.

Institutions & public organizations

Institutions exist to serve the public. But the “public” isn’t just one person - it’s many individuals with a spectrum of needs, connections, devices, and disabilities. That can be challenging for a UI developer because you need to support near infinite use cases.

European Union

The European Union includes 27 member states that account for 447 million people. The Europa Component Library (ECL) provides a standard set of UI components, built in Storybook, for use on all Europa websites and apps.

United Nations World Food Programme

The World Food Programme (WFP) is the largest humanitarian organization in the world that serves 115 million people in 80 countries. They use Storybook to build and document ready-made, accessible UI components that adhere to brand guidelines.

Gov.UK

Gov.uk is the digital portal for every ministerial department in the United Kingdom. They maintain a high user interface standard using a design system made with Storybook. Any developer on any team can find and reuse existing work.

Mozilla Firefox

Firefox’s 198 million users makes it one of the most popular browsers of all time. Firefox’s payment UI is built in isolation with Storybook. That simplifies frontend development by disentangling the user interface from messy payment and billing logic.

Travel & Transport apps

Every itinerary is made up of a bunch of different facets like date, location, number of passengers, accommodation, transportation. That’s tricky for you to keep track of because the number of permutations is seemingly endless.

Airbnb

Imagine building a DatePicker that 500 million guests use to find accommodations. Airbnb devotes a whole Storybook to mapping out the key states of their open source react-dates library.

Skyscanner Backpack

When 100 million people trust your search engine with their travel needs, it needs to be bulletproof. Skyscanner uses Storybook to build and stress test its UI. The Backpack design system includes all the basics you need to create the Skyscanner experience.

Audi

Audi is a top 3 luxury car brand renowned for its driving experience. But with more folks discovering vehicles via the web, the same attention to detail must also extend to the user experience. Audi’s design system is built and documented with Storybook.

Developer tools

Every company is different and so is their tech stack. Developer tools are used to build and debug the different layers of modern apps. Creating devtool UIs is tough because you need to simulate how the UI behaves in hard to reproduce environments with varying dependencies.

GitHub

73 million developers around the world use GitHub to build software. The developer ecosystem is broad so UIs need to be extra flexible. Primer design system relies on Storybook to develop the atomic components that are used across the GitHub app.

Twilio

Twilio powers text messaging and phone calls for 250k apps. They have customers in 180 countries that communicate in different languages with different services. The product surface area is vast, so they built a design system in Storybook to streamline how devs prototype and ship UIs.

Visual Studio Code

VSCode is the most popular code editor according to Stack Overflow’s 2021 developer survey. VSCode uses Storybook to ship a personalized experience for your preferred coding language, extensions, themes, and git workflows.

Want your project in the encyclopedia?

Our mission is to catalog the highest quality UI components for you to reference and reuse when developing UIs. But we don’t know where every Storybook is published so we need your help to find them.

➕ Add your Storybook here »

Get notified of the official launch

Thousands of teams rely on Storybook to ship UIs. We’re showcasing their UI work and process so the entire frontend community can learn from each other.

Component Encyclopedia is now in beta. We need your help to QA and add more projects to the index. Join us in Storybook Discord #showcase. Contributions from new developers and veterans are welcome.