Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time
Devtools DS Logo

Components and tools for building browser devtools extensions, built on DS-CLI and PostCSS Themed.

CircleCI All Contributors Version Downloads Auto Release code style: prettier

Ever wanted to build your own browser extension or devtools panel? This project can help! We've built out a set of utilities and React components that let you mirror the functionality of the Chrome/FireFox developer tools.

Each component:

  • Supports themes for multiple browsers
  • Is fully written in TypeScript
  • Aims to be keyboard accessible and screen-reader friendly
  • Uses minimal external dependencies

Read more in our Storybook documentation site.

🔨 Developer Set-up

Access source files and and make contributions using the following setup steps:

  1. Clone the repo

    git clone
    cd devtools-ds
  2. Install dependencies

  3. Build

    yarn build
  4. Start Storybook

    yarn storybook

🤝 Contributing

Whether it's improving documentation, adding a new component, or suggesting an issue that will help us improve, all contributions are welcome!

Top reasons to contribute:

  • 😍 Empower others to build high quality browser devtools experiences
  • 🎓 Learn design system development
  • Help maintainers prioritize impactful work

Here are some ideas for contributions:

  • New components
  • New themes (We'd love to see some Safari themes eventually)
  • Accessibility improvements
  • New browser extension templates
  • Support for frameworks like Vue, Angular, or Svelte

For more information about contributing, read our contributing guide and code of conduct.


Thanks goes to these wonderful people (emoji key):

Tyler Krupicka

️️️️♿️ 🐛 💻 🎨 📖 💡 🚇 🚧 ⚠️ 🔧

Adam Dierkens

️️️️♿️ 💻 🎨 📖 💡 🚇 🚧 📦 ⚠️ 🔧

Shelby Cohen

️️️️♿️ 💻 🎨 📖 ⚠️

Kelly Harrop


Andrew Lisowski

📖 💡 💻

Adrian de la Rosa

💻 📖 💡

This project follows the all-contributors specification. Contributions of any kind welcome!