{"id":23494628,"url":"https://github.com/workday/canvas-kit","last_synced_at":"2026-04-10T00:23:27.856Z","repository":{"id":37480679,"uuid":"185232950","full_name":"Workday/canvas-kit","owner":"Workday","description":"Development kits to implement UI following the Workday Canvas Design System (https://canvas.workday.com/). See our Component Storybook -","archived":false,"fork":false,"pushed_at":"2025-04-09T19:53:36.000Z","size":137918,"stargazers_count":308,"open_issues_count":161,"forks_count":227,"subscribers_count":20,"default_branch":"master","last_synced_at":"2025-04-09T20:25:21.154Z","etag":null,"topics":["design-system","workday"],"latest_commit_sha":null,"homepage":"https://workday.github.io/canvas-kit/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Workday.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":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-05-06T16:25:51.000Z","updated_at":"2025-04-09T19:28:18.000Z","dependencies_parsed_at":"2024-03-28T22:42:17.905Z","dependency_job_id":"3b3b846d-8e2a-4018-883e-295e0dbf55ca","html_url":"https://github.com/Workday/canvas-kit","commit_stats":{"total_commits":2058,"total_committers":114,"mean_commits":18.05263157894737,"dds":0.7774538386783285,"last_synced_commit":"b77094358b71a79789ab1a51e76efb121229bbdf"},"previous_names":[],"tags_count":616,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Workday%2Fcanvas-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Workday%2Fcanvas-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Workday%2Fcanvas-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Workday%2Fcanvas-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Workday","download_url":"https://codeload.github.com/Workday/canvas-kit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248154964,"owners_count":21056541,"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":["design-system","workday"],"created_at":"2024-12-25T03:11:45.916Z","updated_at":"2026-01-06T23:21:39.171Z","avatar_url":"https://github.com/Workday.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Workday Canvas Kit\n\nThis project provides a set of components for the Workday Canvas Design System that can be used to\nimplement user experiences consistent with\n[Workday's design principles](https://design.workday.com/).\n\n\u003ca href=\"./LICENSE\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/license-Apache--2.0-blue.svg\" alt=\"Workday Canvas Kit is released under the Apache-2.0 license\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://lerna.js.org\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg\" alt=\"Maintained with Lerna\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://github.com/Workday/canvas-kit/actions/workflows/release.yml\"\u003e\n  \u003cimg alt=\"Release\" src=\"https://github.com/Workday/canvas-kit/actions/workflows/release.yml/badge.svg\"\u003e\n\u003c/a\u003e\n\u003ca href=\"./modules/docs/mdx/CONTRIBUTING.mdx\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg\" alt=\"PRs welcome\" /\u003e\n\u003c/a\u003e\n\n---\n\n## Getting Started\n\n### React\n\n**Dependency Version Support**\n\nThe following are supported versions of dependencies.\n\n- React: \u003e=16.8 \u003c 17\n- Typescript: \u003e=5.0 (optional)\n- Emotion: ^11.7.0\n\n**Installation**\n\nTo get started using Canvas kit React first add or install the module to your existing React project\n\n```sh\nyarn add @workday/canvas-kit-react @workday/canvas-tokens-web\n```\n\nor\n\n```sh\nnpm install @workday/canvas-kit-react @workday/canvas-tokens-web\n```\n\n\u003e **Note:** If your application does not already provide `Roboto` as a font, you can install\n\u003e `@workday/canvas-kit-react-fonts`. The example below shows how to inject the fonts, but you can\n\u003e omit this if you're already loading fonts.\n\n**Usage**\n\nTo ensure fonts are loaded correctly, update your root `index.js` file.\n\n```jsx\nimport {createRoot} from 'react-dom/client';\nimport {injectGlobal} from '@emotion/css';\nimport {fonts} from '@workday/canvas-kit-react-fonts';\nimport {system} from '@workday/canvas-tokens-web';\nimport {cssVar} from '@workday/canvas-kit-styling';\n\nimport '@workday/canvas-tokens-web/css/base/_variables.css';\nimport '@workday/canvas-tokens-web/css/brand/_variables.css';\nimport '@workday/canvas-tokens-web/css/system/_variables.css';\n\nimport {App} from './App';\n\ninjectGlobal({\n  ...fonts,\n  'html, body': {\n    fontFamily: cssVar(system.fontFamily.default),\n    margin: 0,\n    minHeight: '100vh',\n  },\n  '#root, #root \u003c div': {\n    minHeight: '100vh',\n    ...system.type.body.small,\n  },\n});\n\nconst container = document.getElementById('root')!;\nconst root = createRoot(container);\nroot.render(\u003cApp /\u003e);\n```\n\nThe in your `App.js` you can set a global theme.\n\n```jsx\nimport {CanvasProvider} from '@workday/canvas-kit-react/common';\n\nexport const App = () =\u003e {\n  return (\n    \u003cCanvasProvider\u003e\n      \u003c\u003e\n        \u003cmain\u003e\n          \u003cp\u003eGet Started With Canvas Kit\u003c/p\u003e\n        \u003c/main\u003e\n      \u003c/\u003e\n    \u003c/CanvasProvider\u003e\n  );\n};\n```\n\n\u003e **Note:** Don't use the `CanvasProvider` to theme, instead use our CSS tokens from\n\u003e `@workday/canvas-tokens-web`. For more information, view our\n\u003e [Token docs](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).\n\u003e Theming should be global.\n\n## Reporting a Bug\n\nIf you spot a bug, inconsistency, or typo, please\n[open a bug issue](https://github.com/Workday/canvas-kit/issues/new?labels=bug\u0026template=bug.md).\nBetter yet, submit a pull request to address it.\n\n## Feature Requests\n\nIf you have an idea, we would love to hear about it. The best way to suggest a feature is to\n[open a feature issue](https://github.com/Workday/canvas-kit/issues/new?labels=feature\u0026template=feature.md).\nThe Canvas Kit core team will take a look and discuss it with you.\n\n## Contributing\n\nWant to contribute to Canvas Kit React? Please read our\n[contributing guidelines](https://workday.github.io/canvas-kit/?path=/docs/guides-contributing--docs)\nto find out more and how to get started.\n\n## Maintaining\n\nIf you're a Canvas Kit maintainer, please read our\n[maintaining docs](https://workday.github.io/canvas-kit/?path=/docs/guides-maintaining--docs) to\nlearn more about our processes.\n\n## Open Development\n\nAll work on the Canvas Kit happens directly on [GitHub](https://github.com/Workday/canvas-kit). Both\ncore team members and external contributors can send pull requests which go through the same review\nprocess. Any and all issues are public and available for discussion.\n\n## Versioning\n\nCanvas Kit follows [semantic versioning](https://semver.org/) and is enforced automatically by\n[conventional commits](https://www.conventionalcommits.org/) (see\n[\"Commit Message Format\"](https://workday.github.io/canvas-kit/?path=/docs/guides-contributing--docs#commit-message-format)).\n\nEach module is independently versioned using [Lerna](https://github.com/lerna/lerna).\n\n## Version Support\n\nAt any given time, we support three major versions of Canvas Kit: previous, current, and next. Each\nof these has different levels of support.\n\nThe previous major version is stable for production and will receive patch updates as needed, but\nthere will be no new features added. Patch releases are automatically deployed upon merge by GitHub\nActions.\n\nThe current major version is also stable and receives new features and patch updates. Patch releases\nare automatically deployed upon merge by GitHub Actions, and minor releases are manually deployed at\nthe end of each sprint.\n\nThe next major version is typically an unstable environment and has major breaking changes. You are\nwelcome to pull this version down for local development and experimentation, but we generally\nrecommend against using it in production until the first stable version has been released.\n\n## Developer Documentation\n\n- [Contributing](https://workday.github.io/canvas-kit/?path=/docs/guides-contributing--docs)\n- [Code of Conduct](https://workday.github.io/canvas-kit/?path=/docs/guides-contributing--docs#code-of-conduct)\n- Upgrade Guides:\n  - [v4.0 Upgrade Guide](https://workday.github.io/canvas-kit/?path=/docs/guides-upgrade-guides-v4-0--docs)\n  - [v5.0 Upgrade Guide](https://workday.github.io/canvas-kit/?path=/docs/guides-upgrade-guides-v5-0--docs)\n  - [v6.0 Upgrade Guide](https://workday.github.io/canvas-kit/?path=/docs/guides-upgrade-guides-v6-0--docs)\n  - [v7.0 Upgrade Guide](https://workday.github.io/canvas-kit/?path=/docs/guides-upgrade-guides-v7-0--docs)\n  - [v8.0 Upgrade Guide](https://workday.github.io/canvas-kit/?path=/docs/guides-upgrade-guides-v8-0--docs)\n  - [v9.0 Upgrade Guide](https://workday.github.io/canvas-kit/?path=/docs/guides-upgrade-guides-v9-0--docs)\n  - [v10.0 Upgrade Guide](https://workday.github.io/canvas-kit/?path=/docs/guides-upgrade-guides-v10-0--docs)\n  - [v11.0 Upgrade Guide](https://workday.github.io/canvas-kit/?path=/docs/guides-upgrade-guides-v11-0--docs)\n  - [v12.0 Upgrade Guide](https://workday.github.io/canvas-kit/?path=/docs/guides-upgrade-guides-v12-0--docs)\n  - [v13.0 Upgrade Guide](https://workday.github.io/canvas-kit/?path=/docs/guides-upgrade-guides-v13-0--docs)\n  - [v14.0 Upgrade Guide](https://workday.github.io/canvas-kit/?path=/docs/guides-upgrade-guides-v14-0-overview--docs)\n- Code Style / Best Practices:\n  - [API \u0026 Pattern Guidelines](https://workday.github.io/canvas-kit/?path=/docs/guides-api-pattern-guidelines--docs)\n  - [Compound Components](https://workday.github.io/canvas-kit/?path=/docs/guides-compound-components--docs)\n  - [Creating Compound Components](https://workday.github.io/canvas-kit/?path=/docs/guides-creating-compound-components--docs)\n  - [Testing](https://workday.github.io/canvas-kit/?path=/docs/guides-testing--docs)\n\n## License\n\nThe Workday Canvas Kits are licensed under the Apache 2.0 License.\n\n## Supported Browsers\n\n- Microsoft Edge: last 2 versions\n- Mozilla Firefox: last 2 versions\n- Google Chrome: last 2 versions\n- Apple Safari: last 2 versions\n- Opera: last 2 versions\n\n## Thank you\n\nVisual Testing by [ChromaticQA](https://www.chromaticqa.com/)\n\nBuilds by [Github Actions](https://docs.github.com/en/actions)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fworkday%2Fcanvas-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fworkday%2Fcanvas-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fworkday%2Fcanvas-kit/lists"}