❗️ This is a forked package, with the goal of removing the deprecated React
defaultPropsfeature in favor of native default props.
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.
Access source files and and make contributions using the following setup steps:
-
Clone the repo
git clone https://github.com/design-systems/devtools-ds.git cd devtools-ds -
Install dependencies
yarn
-
Build
yarn build
-
Start Storybook
yarn storybook
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!