{"id":13659971,"url":"https://github.com/intuit/devtools-ds","last_synced_at":"2025-05-15T18:09:58.402Z","repository":{"id":41906199,"uuid":"332059268","full_name":"intuit/devtools-ds","owner":"intuit","description":"UI components, libraries, and templates for building robust devtools experiences.","archived":false,"fork":false,"pushed_at":"2024-06-09T23:22:54.000Z","size":2647,"stargazers_count":259,"open_issues_count":9,"forks_count":16,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-05-03T17:44:10.086Z","etag":null,"topics":["chrome-extension","design-system","devtools","firefox-addon","react","storybook","webextension"],"latest_commit_sha":null,"homepage":"https://intuit.github.io/devtools-ds","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/intuit.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-01-22T20:48:49.000Z","updated_at":"2025-04-23T14:08:51.000Z","dependencies_parsed_at":"2024-04-09T18:55:16.597Z","dependency_job_id":"9f7814e8-811f-43f8-be9c-7478299ce4e6","html_url":"https://github.com/intuit/devtools-ds","commit_stats":{"total_commits":140,"total_committers":8,"mean_commits":17.5,"dds":0.4285714285714286,"last_synced_commit":"c64aa769a8fe32a84fc367864dd81de8c5e095bc"},"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/intuit%2Fdevtools-ds","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/intuit%2Fdevtools-ds/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/intuit%2Fdevtools-ds/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/intuit%2Fdevtools-ds/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/intuit","download_url":"https://codeload.github.com/intuit/devtools-ds/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254171898,"owners_count":22026536,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chrome-extension","design-system","devtools","firefox-addon","react","storybook","webextension"],"created_at":"2024-08-02T05:01:14.435Z","updated_at":"2025-05-15T18:09:58.384Z","avatar_url":"https://github.com/intuit.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg\n    src=\".storybook/devtools-ds-logo.svg\"\n    alt=\"Devtools DS Logo\"\n    width=\"200px\"\n    padding=\"40px\"\n  /\u003e\n  \u003cbr /\u003e\n  \u003cbr /\u003e\n  \u003cp\u003eComponents and tools for building browser devtools extensions, built on \u003ca href=\"https://github.com/intuit/design-systems-cli\"\u003eDS-CLI\u003c/a\u003e and \u003ca href=\"https://github.com/intuit/postcss-themed\"\u003ePostCSS Themed\u003c/a\u003e.\u003c/p\u003e\n\u003c/div\u003e\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\u003ca href=\"https://circleci.com/gh/circleci/circleci-docs\"\u003e\u003cimg src=\"https://circleci.com/gh/intuit/devtools-ds.svg?style=svg\u0026circle-token=b5183499c8ac0141ceabc248d3575a946e243bbb\" alt=\"CircleCI\" /\u003e\u003c/a\u003e\n\u003ca href=\"#contributors\"\u003e\u003cimg src=\"https://img.shields.io/badge/all_contributors-5-orange.svg?style=flat-square\u0026logo=github\" alt=\"All Contributors\" /\u003e\u003c/a\u003e\n\u003ca href=\"#version\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/@devtools-ds/tree?style=flat-square\" alt=\"Version\" /\u003e\u003c/a\u003e\n  \u003ca href=\"#downloads\"\u003e\u003cimg src=\"https://img.shields.io/npm/dt/@devtools-ds/themes?style=flat-square\" alt=\"Downloads\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/intuit/auto\"\u003e\u003cimg src=\"https://img.shields.io/badge/release-auto.svg?style=flat-square\u0026colorA=888888\u0026amp;colorB=9B065A\u0026amp;label=auto\u0026amp;logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAACzElEQVR4AYXBW2iVBQAA4O+/nLlLO9NM7JSXasko2ASZMaKyhRKEDH2ohxHVWy6EiIiiLOgiZG9CtdgG0VNQoJEXRogVgZYylI1skiKVITPTTtnv3M7+v8UvnG3M+r7APLIRxStn69qzqeBBrMYyBDiL4SD0VeFmRwtrkrI5IjP0F7rjzrSjvbTqwubiLZffySrhRrSghBJa8EBYY0NyLJt8bDBOtzbEY72TldQ1kRm6otana8JK3/kzN/3V/NBPU6HsNnNlZAz/ukOalb0RBJKeQnykd7LiX5Fp/YXuQlfUuhXbg8Di5GL9jbXFq/tLa86PpxPhAPrwCYaiorS8L/uuPJh1hZFbcR8mewrx0d7JShr3F7pNW4vX0GRakKWVk7taDq7uPvFWw8YkMcPVb+vfvfRZ1i7zqFwjtmFouL72y6C/0L0Ie3GvaQXRyYVB3YZNE32/+A/D9bVLcRB3yw3hkRCdaDUtFl6Ykr20aaLvKoqIXUdbMj6GFzAmdxfWx9iIRrkDr1f27cFONGMUo/gRI/jNbIMYxJOoR1cY0OGaVPb5z9mlKbyJP/EsdmIXvsFmM7Ql42nEblX3xI1BbYbTkXCqRnxUbgzPo4T7sQBNeBG7zbAiDI8nWfZDhQWYCG4PFr+HMBQ6l5VPJybeRyJXwsdYJ/cRnlJV0yB4ZlUYtFQIkMZnst8fRrPcKezHCblz2IInMIkPzbbyb9mW42nWInc2xmE0y61AJ06oGsXL5rcOK1UdCbEXiVwNXsEy/6+EbaiVG8eeEAfxvaoSBnCH61uOD7BS1Ul8ESHBKWxCrdyd6EYNKihgEVrwOAbQruoytuBYIFfAc3gVN6iawhjKyNCEpYhVJXgbOzARyaU4hCtYizq5EI1YgiUoIlT1B7ZjByqmRWYbwtdYjoWoN7+LOIQefIqKawLzK6ID69GGpQgwhhEcwGGUzfEPAiPqsCXadFsAAAAASUVORK5CYII=\" alt=\"Auto Release\" /\u003e\u003c/a\u003e \n\u003ca href=\"https://github.com/prettier/prettier\"\u003e\u003cimg src=\"https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square\u0026logo=producthunt\" alt=\"code style: prettier\" /\u003e\u003c/a\u003e\n\u003c/div\u003e\n\nEver 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.\n\nEach component:\n\n- Supports themes for multiple browsers\n- Is fully written in TypeScript\n- Aims to be keyboard accessible and screen-reader friendly\n- Uses minimal external dependencies\n\nRead more in our [Storybook documentation site](https://intuit.github.io/devtools-ds).\n\n## :hammer: Developer Set-up\n\nAccess source files and and make contributions using the following setup steps:\n\n1. Clone the repo\n\n   ```sh\n   git clone https://github.com/design-systems/devtools-ds.git\n   cd devtools-ds\n   ```\n\n2. Install dependencies\n\n   ```sh\n   yarn\n   ```\n\n3. Build\n\n   ```sh\n   yarn build\n   ```\n\n4. Start Storybook\n\n   ```sh\n   yarn storybook\n   ```\n\n# 🤝 Contributing\n\nWhether it's improving documentation, adding a new component, or suggesting an issue that will help us improve, all contributions are welcome!\n\nTop reasons to contribute:\n\n\u003cul\u003e\n  \u003cli\u003e\n    \u003cspan aria-hidden style={{ marginRight: 8 }}\u003e\n      😍\n    \u003c/span\u003e\n    Empower others to build high quality browser devtools experiences\n  \u003c/li\u003e\n  \u003cli\u003e\n    \u003cspan aria-hidden style={{ marginRight: 8 }}\u003e\n      🎓\n    \u003c/span\u003e\n    Learn design system development\n  \u003c/li\u003e\n  \u003cli\u003e\n    \u003cspan aria-hidden style={{ marginRight: 8 }}\u003e\n      ⏳\n    \u003c/span\u003e\n    Help maintainers prioritize impactful work\n  \u003c/li\u003e\n\u003c/ul\u003e\n\nHere are some ideas for contributions:\n\n- New components\n- New themes (We'd love to see some Safari themes eventually)\n- Accessibility improvements\n- New browser extension templates\n- Support for frameworks like Vue, Angular, or Svelte\n\nFor more information about contributing, read our [contributing guide](./CONTRIBUTING.md) and [code of conduct](./CODE_OF_CONDUCT.md).\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/tylerkrupicka\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/5761061?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eTyler Krupicka\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#a11y-tylerkrupicka\" title=\"Accessibility\"\u003e️️️️♿️\u003c/a\u003e \u003ca href=\"https://github.com/design-systems/devtools-ds/issues?q=author%3Atylerkrupicka\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"https://github.com/design-systems/devtools-ds/commits?author=tylerkrupicka\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#design-tylerkrupicka\" title=\"Design\"\u003e🎨\u003c/a\u003e \u003ca href=\"https://github.com/design-systems/devtools-ds/commits?author=tylerkrupicka\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#example-tylerkrupicka\" title=\"Examples\"\u003e💡\u003c/a\u003e \u003ca href=\"#infra-tylerkrupicka\" title=\"Infrastructure (Hosting, Build-Tools, etc)\"\u003e🚇\u003c/a\u003e \u003ca href=\"#maintenance-tylerkrupicka\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e \u003ca href=\"https://github.com/design-systems/devtools-ds/commits?author=tylerkrupicka\" title=\"Tests\"\u003e⚠️\u003c/a\u003e \u003ca href=\"#tool-tylerkrupicka\" title=\"Tools\"\u003e🔧\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/adierkens\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/13004162?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAdam Dierkens\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#a11y-adierkens\" title=\"Accessibility\"\u003e️️️️♿️\u003c/a\u003e \u003ca href=\"https://github.com/design-systems/devtools-ds/commits?author=adierkens\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#design-adierkens\" title=\"Design\"\u003e🎨\u003c/a\u003e \u003ca href=\"https://github.com/design-systems/devtools-ds/commits?author=adierkens\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#example-adierkens\" title=\"Examples\"\u003e💡\u003c/a\u003e \u003ca href=\"#infra-adierkens\" title=\"Infrastructure (Hosting, Build-Tools, etc)\"\u003e🚇\u003c/a\u003e \u003ca href=\"#maintenance-adierkens\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e \u003ca href=\"#platform-adierkens\" title=\"Packaging/porting to new platform\"\u003e📦\u003c/a\u003e \u003ca href=\"https://github.com/design-systems/devtools-ds/commits?author=adierkens\" title=\"Tests\"\u003e⚠️\u003c/a\u003e \u003ca href=\"#tool-adierkens\" title=\"Tools\"\u003e🔧\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/ShelbyCohen\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/7768053?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eShelby Cohen\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#a11y-ShelbyCohen\" title=\"Accessibility\"\u003e️️️️♿️\u003c/a\u003e \u003ca href=\"https://github.com/design-systems/devtools-ds/commits?author=ShelbyCohen\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#design-ShelbyCohen\" title=\"Design\"\u003e🎨\u003c/a\u003e \u003ca href=\"https://github.com/design-systems/devtools-ds/commits?author=ShelbyCohen\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"https://github.com/design-systems/devtools-ds/commits?author=ShelbyCohen\" title=\"Tests\"\u003e⚠️\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/kharrop\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/24794756?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eKelly Harrop\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#design-kharrop\" title=\"Design\"\u003e🎨\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://hipstersmoothie.com/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/1192452?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAndrew Lisowski\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/design-systems/devtools-ds/commits?author=hipstersmoothie\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#example-hipstersmoothie\" title=\"Examples\"\u003e💡\u003c/a\u003e \u003ca href=\"https://github.com/design-systems/devtools-ds/commits?author=hipstersmoothie\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://adrian.delarosab.me/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/1523379?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAdrian de la Rosa\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/design-systems/devtools-ds/commits?author=mormubis\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/design-systems/devtools-ds/commits?author=mormubis\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#example-mormubis\" title=\"Examples\"\u003e💡\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fintuit%2Fdevtools-ds","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fintuit%2Fdevtools-ds","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fintuit%2Fdevtools-ds/lists"}