{"id":20253388,"url":"https://github.com/chanzuckerberg/sci-components","last_synced_at":"2026-02-14T03:59:40.835Z","repository":{"id":37789607,"uuid":"345787860","full_name":"chanzuckerberg/sci-components","owner":"chanzuckerberg","description":"2021  Science Design System Component Library","archived":false,"fork":false,"pushed_at":"2026-02-05T19:28:01.000Z","size":75438,"stargazers_count":32,"open_issues_count":110,"forks_count":7,"subscribers_count":10,"default_branch":"main","last_synced_at":"2026-02-06T04:19:47.182Z","etag":null,"topics":["css","design-system","react","theme"],"latest_commit_sha":null,"homepage":"https://chanzuckerberg.github.io/sci-components/","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/chanzuckerberg.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2021-03-08T20:37:00.000Z","updated_at":"2026-02-04T21:38:15.000Z","dependencies_parsed_at":"2023-10-03T15:12:50.160Z","dependency_job_id":"e6151384-b304-48f4-a8b0-fe04bf3530c5","html_url":"https://github.com/chanzuckerberg/sci-components","commit_stats":{"total_commits":339,"total_committers":20,"mean_commits":16.95,"dds":0.6489675516224189,"last_synced_commit":"6cb42ddeb43559eda8eab7403dbef9f4831e7eeb"},"previous_names":[],"tags_count":367,"template":false,"template_full_name":null,"purl":"pkg:github/chanzuckerberg/sci-components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chanzuckerberg%2Fsci-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chanzuckerberg%2Fsci-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chanzuckerberg%2Fsci-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chanzuckerberg%2Fsci-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chanzuckerberg","download_url":"https://codeload.github.com/chanzuckerberg/sci-components/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chanzuckerberg%2Fsci-components/sbom","scorecard":{"id":273829,"data":{"date":"2025-08-11","repo":{"name":"github.com/chanzuckerberg/sci-components","commit":"584c14e5c7cf719d9682c95b6a3e7c00b67de069"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":5.5,"checks":[{"name":"Code-Review","score":7,"reason":"Found 10/14 approved changesets -- score normalized to 7","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Maintained","score":10,"reason":"23 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 10","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Security-Policy","score":9,"reason":"security policy file detected","details":["Info: security policy file detected: SECURITY.md:1","Info: Found linked content: SECURITY.md:1","Warn: One or no descriptive hints of disclosure, vulnerability, and/or timelines in security policy","Info: Found text in security policy: SECURITY.md:1"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/chromatic.yml:1","Warn: no topLevel permission defined: .github/workflows/commitlint.yml:1","Warn: no topLevel permission defined: .github/workflows/namespace-check.yml:1","Warn: no topLevel permission defined: .github/workflows/push-tests.yml:1","Warn: no topLevel permission defined: .github/workflows/release.yml:1","Warn: no topLevel permission defined: .github/workflows/storybook-tests.yml:1","Warn: no topLevel permission defined: .github/workflows/storybook.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Branch-Protection","score":5,"reason":"branch protection is not maximal on development and all release branches","details":["Info: 'allow deletion' disabled on branch 'main'","Info: 'force pushes' disabled on branch 'main'","Warn: 'branch protection settings apply to administrators' is disabled on branch 'main'","Warn: 'stale review dismissal' is disabled on branch 'main'","Warn: required approving review count is 1 on branch 'main'","Warn: codeowners review is not required on branch 'main'","Warn: 'last push approval' is disabled on branch 'main'","Info: status check found to merge onto on branch 'main'","Info: PRs are required in order to make changes on branch 'main'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/chromatic.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/chanzuckerberg/sci-components/chromatic.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/chromatic.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/chanzuckerberg/sci-components/chromatic.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/chromatic.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/chanzuckerberg/sci-components/chromatic.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/commitlint.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/chanzuckerberg/sci-components/commitlint.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/namespace-check.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/chanzuckerberg/sci-components/namespace-check.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/namespace-check.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/chanzuckerberg/sci-components/namespace-check.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/push-tests.yml:69: update your workflow using https://app.stepsecurity.io/secureworkflow/chanzuckerberg/sci-components/push-tests.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/push-tests.yml:75: update your workflow using https://app.stepsecurity.io/secureworkflow/chanzuckerberg/sci-components/push-tests.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/push-tests.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/chanzuckerberg/sci-components/push-tests.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/push-tests.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/chanzuckerberg/sci-components/push-tests.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/push-tests.yml:45: update your workflow using https://app.stepsecurity.io/secureworkflow/chanzuckerberg/sci-components/push-tests.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/push-tests.yml:51: update your workflow using https://app.stepsecurity.io/secureworkflow/chanzuckerberg/sci-components/push-tests.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/chanzuckerberg/sci-components/release.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/chanzuckerberg/sci-components/release.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:74: update your workflow using https://app.stepsecurity.io/secureworkflow/chanzuckerberg/sci-components/release.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:89: update your workflow using https://app.stepsecurity.io/secureworkflow/chanzuckerberg/sci-components/release.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:101: update your workflow using https://app.stepsecurity.io/secureworkflow/chanzuckerberg/sci-components/release.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:157: update your workflow using https://app.stepsecurity.io/secureworkflow/chanzuckerberg/sci-components/release.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:186: update your workflow using https://app.stepsecurity.io/secureworkflow/chanzuckerberg/sci-components/release.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/storybook-tests.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/chanzuckerberg/sci-components/storybook-tests.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/storybook-tests.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/chanzuckerberg/sci-components/storybook-tests.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/storybook.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/chanzuckerberg/sci-components/storybook.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/storybook.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/chanzuckerberg/sci-components/storybook.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/storybook.yml:35: update your workflow using https://app.stepsecurity.io/secureworkflow/chanzuckerberg/sci-components/storybook.yml/main?enable=pin","Info:   0 out of  18 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   6 third-party GitHubAction dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"SAST","score":6,"reason":"SAST tool is not run on all commits -- score normalized to 6","details":["Warn: 17 commits out of 27 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"14 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-h5c3-5r3r-rr8q","Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38","Warn: Project is vulnerable to: GHSA-xx4v-prfh-6cgc","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99","Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97","Warn: Project is vulnerable to: GHSA-8g77-54rh-46hx","Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-g3ch-rx76-35fx"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-17T13:59:09.326Z","repository_id":37789607,"created_at":"2025-08-17T13:59:09.326Z","updated_at":"2025-08-17T13:59:09.326Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29287695,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-09T21:57:15.303Z","status":"ssl_error","status_checked_at":"2026-02-09T21:57:11.537Z","response_time":56,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["css","design-system","react","theme"],"created_at":"2024-11-14T10:23:43.585Z","updated_at":"2026-02-10T01:01:19.102Z","avatar_url":"https://github.com/chanzuckerberg.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Purpose\n\nThe Science Design System (SDS) brings consistency and universal standards to CZI’s science products by offering a library of high quality, reusable components that deliver predictable, accessible and easy to learn experiences. Our goal is to democratize access to tools and technologies for scientists.\n\n## Design System Documentation\n\n`@czi-sds/components` implements the Science Design System as documented in [Zeroheight](https://sds.czi.design/). As a result, it's very useful to get familiar with the available **theme variables**, such as `colors`, `spaces`, `typography`, etc., so you can leverage the theme properly in your application.\n\n![Science Design System Zeroheight Homepage Snapshot](https://user-images.githubusercontent.com/6309723/155802483-366008aa-7380-4a01-b356-ae0ab02f4f3b.png)\n\n## Installation\n\n[NPM Package](https://www.npmjs.com/package/czi-sds/components)\n\n**Currently SDS uses Material UI v5**\n\nNOTE: Since most of the czi-sds components are built on top of Material UI's equivalent, it's also super useful to use their [API documentation](https://mui.com/) to learn about what you can do with the components. Many czi-sds components are style wrappers that pass props through to the MUI component without modifying them.\n\n`@czi-sds/components` installs without direct dependencies to prevent version errors. Please ensure the following peer dependencies are also installed:\n\n```\n  \"@emotion/css\"\n  \"@emotion/react\"\n  \"@emotion/styled\"\n  \"@mui/base\"\n  \"@mui/icons-material\"\n  \"@mui/lab\"\n  \"@mui/material\"\n  \"react\"\n  \"react-dom\"\n```\n\nTo install @czi-sds/components and the dependencies:\n\n```\n// with npm\nnpm i @czi-sds/components @emotion/css @emotion/react @emotion/styled @mui/base @mui/material @mui/icons-material @mui/lab react react-dom\n\n// with yarn\nyarn add @czi-sds/components @emotion/css @emotion/react @emotion/styled @mui/base @mui/material @mui/icons-material @mui/lab react react-dom\n```\n\n## Yarn scripts\n\nCommon yarn scrips have been moved to the monorepo root. The -- syntax can be used to pass parameters to the underlying yarn scripts. For instance, to update the snapshots, use `lerna run test -- -u` instead of running all tests on both packages with `yarn test`.\n\n- `yarn start`: Starts storybook on the local machine\n- `yarn build-storybook`: Builds the storybook in the docs-build folder\n- `yarn test-storybook`: Tests current running instance of storybook\n- `yarn storybook:axe`: Builds the storybook and runs accessibility tests\n- `yarn storybook:axeOnly`: Runs accessibility tests on the latest build of the storybook inside the docs-build folder\n- `yarn test`: Runs `jest` tests\n- `yarn namespace-check`: Runs typescript type checking on namespace files to ensure that there are no duplicated exports\n- `yarn lint`: Runs linter\n- `yarn build`: Build the packages\n- `yarn ci`: Executes `yarn install --frozen-lockfile` in both packages\n- `yarn evaluate:code \u003cfile\u003e`: Evaluates a single component file for SDS compliance\n- `yarn evaluate:batch \u003cdirectory\u003e`: Evaluates all .tsx/.ts files in a directory\n\n- _To execute any script in the inner package, one can simply use the command `lerna run script --scope=\u003cpackage\u003e`. For instance, to run the linter only on the sci-components package, use the command `lerna run lint --scope=@czi-sds/components`._\n\n## Usage\n\n`@czi-sds/components` comes with five main exports that help you build your app:\n\n1. Components - Accessible and reusable components\n\n```javascript\nimport React from \"react\";\nimport { Button } from \"@czi-sds/components\";\n\u003cButton onClick={actions.onClick} sdsStyle=\"rounded\" sdsType=\"primary\"\u003e\n  {text}\n\u003c/Button\u003e;\n```\n\n2. Mixins - Grouped styles defined by the design system\n\n```javascript\nimport { styled } from '@emotion/styled';\nimport { Typography } from \"@mui/material\";\nimport { fontHeaderXL } from \"@czi-sds/components\";\n\nexport const Title - styled(Typography)`\n  ${fontHeaderXl}\n\n  // which compiles to:\n  font-size: 22px;\n  font-weight: 600;\n  letter-spacing: 0.3px;\n  line-height: 30px;\n`;\n```\n\n3. Selectors - Helper functions that return theme variables baased on passed props\n\n```ts\nimport { css, SerializedStyles } from \"@emotion/react\";\nimport styled from \"@emotion/styled\";\nimport { getColors, getCorners } from \"@czi-sds/components\";\n\nexport const Tag = styled(\"div\")`\n  // This is a callback function that returns more CSS rules, but the only way\n  // to access the custom theme object\n  ${(props) =\u003e {\n    // getColors() is a selector that picks out colors from the theme object\n    const colors = getColors(props);\n    // getSpaces() is a selector that picks out spaces from the theme object\n    const spaces = getSpaces(props);\n\n    return `\n          background-color: ${colors?.gray[500]};\n          padding-bottom: ${spaces?.m}px;\n          margin-bottom: ${spaces?.xxl}px;\n        `;\n  }}\n`;\n```\n\n4. CSS \u0026 SCSS Variables - Variables for the `defaultTheme` to use if your app doesn't support `@emotion/styled`\n\n```scss\n// with SCSS variables\n@import \"~@czi-sds/components/dist/variables\";\n\n.button-primary {\n  background-color: $sds-color-primary-400;\n  padding: $sds-spaces-xxs;\n}\n\n// with CSS variables\n.button-primary {\n  background-color: var(--sds-color-primary-400);\n  padding: var(--sds-spaces-xxs);\n}\n```\n\n5. Tailwind - Tailwind compliant configuration for the `defaultTheme` to use if your app uses Tailwind\n\nFirst you need to import the SDS config into your application's Tailwind config:\n\n```js\n// tailwind.config.js\n\nconst sds = require(\"@czi-sds/components/dist/tailwind.json\");\n\nmodule.exports = {\n  mode: \"jit\",\n  content: [\"./src/**/*.{tsx,scss}\"],\n  theme: {\n    extend: sds,\n  },\n};\n```\n\nIf you have existing styles that you'd like to maintain, you can pick and choose\ndifferent parts of the SDS config:\n\n```js\n// tailwind.config.js\n\nconst sds = require(\"@czi-sds/components/dist/tailwind.json\");\n\nmodule.exports = {\n  mode: \"jit\",\n  content: [\"./src/**/*.{tsx,scss}\"],\n  theme: {\n    extend: {\n      ...sds,\n\n      width: {\n        ...sds.width,\n        \"app-modal-width\": \"500px\",\n      },\n\n      height: {\n        ...sds.width,\n        \"app-modal-height\": \"200px\",\n      },\n    },\n  },\n};\n```\n\nAfter that, you should be able to use SDS Tailwind classes in your app:\n\n```tsx\nexport function Hello() {\n  return (\n    \u003cp className=\"m-sds-xl px-sds-xs py-sds-s text-sds-error-400\"\u003e\n      Hello, World!\n    \u003c/p\u003e\n  );\n}\n```\n\n### Theme System\n\nSDS provides comprehensive light/dark theme support. To use the theme system in your React application, complete the following:\n\n1. Add the following HTML to your `index.html` at the `\u003chead\u003e` section:\n\n```html\n// installs the sds font from google fonts\n\u003clink rel=\"preconnect\" href=\"https://fonts.googleapis.com\" /\u003e\n\u003clink rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin /\u003e\n\u003clink\n  href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700\u0026display=swap\"\n  rel=\"stylesheet\"\n/\u003e\n\u003clink\n  href=\"https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600\u0026display=swap\"\n  rel=\"stylesheet\"\n/\u003e\n```\n\n2. Import and use SDS themes in Material UI's `\u003cThemeProvider /\u003e`:\n\n**Using the default light theme:**\n\n```javascript\nimport { ThemeProvider as EmotionThemeProvider } from \"@emotion/react\";\nimport { StyledEngineProvider, ThemeProvider } from \"@mui/material/styles\";\nimport { defaultTheme } from \"@czi-sds/components\";\n\n\u003cStyledEngineProvider injectFirst\u003e\n  \u003cThemeProvider theme={defaultTheme}\u003e\n    \u003cEmotionThemeProvider theme={defaultTheme}\u003e\n      \u003cYourApp /\u003e\n    \u003c/EmotionThemeProvider\u003e\n  \u003c/ThemeProvider\u003e\n\u003c/StyledEngineProvider\u003e;\n```\n\n**Using programmatic theme switching:**\n\n```javascript\nimport { ThemeProvider as EmotionThemeProvider } from \"@emotion/react\";\nimport { StyledEngineProvider, ThemeProvider } from \"@mui/material/styles\";\nimport { SDSChooseTheme } from \"@czi-sds/components\";\n\nfunction App() {\n  const [isDarkMode, setIsDarkMode] = useState(false);\n  const currentTheme = SDSChooseTheme(isDarkMode ? \"dark\" : \"light\");\n\n  return (\n    \u003cStyledEngineProvider injectFirst\u003e\n      \u003cThemeProvider theme={currentTheme}\u003e\n        \u003cEmotionThemeProvider theme={currentTheme}\u003e\n          \u003cYourApp /\u003e\n        \u003c/EmotionThemeProvider\u003e\n      \u003c/ThemeProvider\u003e\n    \u003c/StyledEngineProvider\u003e\n  );\n}\n```\n\n**Creating custom themes:**\n\nIf you want to create a custom theme with your own color palette, use the `makeSdsSemanticAppTheme` function:\n\n```tsx\nimport { ThemeProvider as EmotionThemeProvider } from \"@emotion/react\";\nimport { makeSdsSemanticAppTheme, makeThemeOptions } from \"@czi-sds/components\";\nimport { StyledEngineProvider, ThemeProvider } from \"@mui/material/styles\";\nimport createTheme from \"@mui/material/styles/createTheme\";\n\n// Define your custom color palette following SDS color structure\nconst myCustomColors = {\n  blue: {\n    /* your blue color scale */\n  },\n  gray: {\n    /* your gray color scale */\n  },\n  // ... other colors\n};\n\n// Create a custom SDS theme\nconst customSdsTheme = makeSdsSemanticAppTheme(myCustomColors, false); // false = light mode\n\n// Generate Material UI theme\nconst appTheme = makeThemeOptions(customSdsTheme);\nconst theme = createTheme(appTheme);\n\n\u003cStyledEngineProvider injectFirst\u003e\n  \u003cThemeProvider theme={theme}\u003e\n    \u003cEmotionThemeProvider theme={theme}\u003e\n      \u003cYourApp /\u003e\n    \u003c/EmotionThemeProvider\u003e\n  \u003c/ThemeProvider\u003e\n\u003c/StyledEngineProvider\u003e;\n```\n\n**Legacy theme override (deprecated):**\n\n⚠️ **Note:** `defaultAppTheme` is deprecated. Use `SDSLightAppTheme` or create custom themes with `makeSdsSemanticAppTheme` instead.\n\n```tsx\n// DEPRECATED - Use makeSdsSemanticAppTheme instead\nimport { defaultAppTheme, makeThemeOptions } from \"@czi-sds/components\";\nconst customTheme = {\n  /* custom properties */\n};\nconst appTheme = makeThemeOptions({ ...defaultAppTheme, ...customTheme });\nconst theme = createTheme(appTheme);\n```\n\n💡 CZGE example available [here](https://github.com/chanzuckerberg/czgenepi/blob/trunk/src/frontend/src/common/styles/theme.ts).\n\n💡 Material UI docs for custom theming available [here](https://mui.com/material-ui/customization/theming/).\n\n## Q\u0026A\n\n1. Why wrapping a component with `styled()` doesn't style the root element as expected?\n\n   This is likely because the component is **NOT** forwarding the css class name that `styled()` generates to the intended root element. So we likely need to update the `czif` component to make it work\n\n   For example, if a `czif` component `Foo` has the following implementation, `styled(Foo)` won't style the wrapper `\u003cdiv /\u003e` as expected:\n\n   ```tsx\n   function Foo() {\n     return (\n       \u003cdiv\u003e\n         \u003cChildA /\u003e\n         \u003cChildB /\u003e\n       \u003c/div\u003e\n     );\n   }\n   ```\n\n   The fix is:\n\n   ```tsx\n   function Foo({ className }) {\n     return (\n       \u003cdiv className={className}\u003e\n         \u003cChildA /\u003e\n         \u003cChildB /\u003e\n       \u003c/div\u003e\n     );\n   }\n   ```\n\n1. To style a sub-component of a `@czi-sds/components` component, typically we export the sub-component for the call site to import and style via `styled`, and then you will be able to pass back the styled sub-component to the `@czi-sds/components` component through prop\n\n   For example, `ComplexFilter` exports `ComplexFilterInputDropdown` sub-component, so if you want to style it, you can do the following:\n\n   ```tsx\n   import {\n     ComplexFilter,\n     ComplexFilterInputDropdown,\n   } from \"@czi-sds/components\";\n   import styled from \"@emotion/styled\";\n\n   const StyledComplexFilterInputDropdown = styled(ComplexFilterInputDropdown)`\n     color: pink;\n   `;\n\n   function Foo() {\n     return (\n       \u003cComplexFilter\n         InputDropdownComponent={StyledComplexFilterInputDropdown}\n       /\u003e\n     );\n   }\n   ```\n\n## Code Evaluation\n\nWe provide a comprehensive evaluation script to assess LLM-generated UI components for SDS compliance and best practices.\n\n### Quick Evaluation\n\n```bash\n# Evaluate a single component\nyarn evaluate:code ./my-component.tsx\n\n# Evaluate all components in a directory\nyarn evaluate:batch ./generated-components/\n```\n\n### What It Evaluates\n\n- ✅ **TypeScript compilation** - Ensures code compiles without errors\n- ✅ **ESLint compliance** - Checks code quality and style\n- ✅ **SDS component usage** - Verifies proper use of design system components\n- ✅ **Import statements** - Ensures SDS components are properly imported\n- ✅ **Design tokens** - Checks for consistent design token usage\n- ✅ **Accessibility** - Verifies accessibility attributes and patterns\n\nFor detailed usage instructions and examples, see [scripts/README.md](scripts/README.md).\n\n## Project status\n\nThis project is under **active development**. Contributions and ideas are welcome! If you would like to contribute, check out the [contribution guidelines](docs/contribution.md) or open an issue.\nThis project is governed under the [Contributor Covenant](https://www.contributor-covenant.org/) code of conduct.\n\n## Reporting Security Issues\n\nPlease note: If you believe you have found a security issue, please responsibly disclose by contacting us at security@chanzuckerberg.com. More information is in our [Security Readme](docs/SECURITY.md)\n\n## Code of Conduct\n\nThis project adheres to the Contributor Covenant [code of conduct](https://github.com/chanzuckerberg/.github/blob/master/CODE_OF_CONDUCT.md).\nBy participating, you are expected to uphold this code.\nPlease report unacceptable behavior to [opensource@chanzuckerberg.com](mailto:opensource@chanzuckerberg.com).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchanzuckerberg%2Fsci-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchanzuckerberg%2Fsci-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchanzuckerberg%2Fsci-components/lists"}