We catalog the world’s UI components so you can discover techniques that actually work.

Web

Spectrum Web Components

Chakra UI

Why have a showcase for UI developers?

More people than ever are building component driven UIs. But everyone is different and so are their recommendations. It’s tough to figure out what development techniques work and what’s hype. How do leading engineering teams really ship UI?

Our community scours the web for the best UI components, libraries, and design systems. We catalog them here in one place. That helps you reference the best work as you build your own projects.

How to add your project

Add your project to Chromatic

Component Encyclopedia indexes Storybooks that are published on Chromatic (it’s free). Chromatic is a service made by Storybook maintainers to publish Storybook to a shared workspace and generate a searchable index for your team.

Learn about Chromatic

Benefits for project maintainers

Inspire fellow devs

Proud of your work? Show it off to our UI engineering community to help them solve problems and find inspiration.

UI testing and review

Get free access to UI testing and review by adding your project. It’s brought to you by Chromatic, the team behind Storybook.

Versioning & history

Go back in time to see the evolution of projects. Compare changes between branches and commits.

Searchable component libraries

Generate a searchable library for your UI components. That helps others discover and reuse your work.

Badges & analysis

Every component and project is analyzed for UI quality to generate shareable badges for READMEs.

Always up to date

Your project is regularly crawled to give you accurate, updated health metrics.

FAQ & troubleshooting

How long does it take my project to show up here?: Projects can take up to 24 hours to appear in the catalog.
How often are projects crawled?: Projects are crawled every 24 hours. If changes are detected, they will be reflected.
Why hasn’t my project been updated?: Check that the URL for your published Storybook is correct and that it’s being updated. If you use Chromatic, your project will automatically update at regular intervals.
How do I report an issue?: Report issues to maintainers in our Discord chat #showcase channel or email showcase@chromatic.com.
Why isn’t my project listed?: We remove malformed Storybooks from the index. Check that your published Storybook URL resolves and whether anything is preventing your stories from rendering. Report issues to maintainers in our Discord chat #showcase channel.
How do I remove my project?: We showcase the best public projects in the frontend ecosystem for developers to learn from. If you’d like to omit your project, add a <meta name="robots" content="noindex"> tag to Storybook’s <head>. This ensures search engines cannot find your Storybook.

If your project is here by accident, we’re happy to remove it. Chat with us inDiscord #showcase or email showcase@chromatic.com.
Is there a Code of Conduct?: In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. Continue reading our contributor covenant.

Special thanks

The Component Encyclopedia is built with Hygraph, who generously provide their CMS for the project.