{"id":22454371,"url":"https://github.com/zebradevs/zeta-web","last_synced_at":"2026-04-02T12:01:32.742Z","repository":{"id":266319901,"uuid":"898031142","full_name":"ZebraDevs/zeta-web","owner":"ZebraDevs","description":"Zebra Design System (Zeta) - Web Components ","archived":false,"fork":false,"pushed_at":"2024-12-03T17:39:53.000Z","size":0,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-12-03T17:49:31.015Z","etag":null,"topics":["design-s","ux","web","webcomponents","zeta"],"latest_commit_sha":null,"homepage":"https://design.zebra.com","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/ZebraDevs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING","funding":null,"license":"LICENSE","code_of_conduct":null,"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":"2024-12-03T17:01:48.000Z","updated_at":"2024-12-03T17:40:41.000Z","dependencies_parsed_at":"2024-12-03T17:50:11.868Z","dependency_job_id":"95b38073-7d35-442b-8d75-859737bfe225","html_url":"https://github.com/ZebraDevs/zeta-web","commit_stats":null,"previous_names":["zebradevs/zeta-web"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZebraDevs%2Fzeta-web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZebraDevs%2Fzeta-web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZebraDevs%2Fzeta-web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZebraDevs%2Fzeta-web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ZebraDevs","download_url":"https://codeload.github.com/ZebraDevs/zeta-web/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228426122,"owners_count":17917790,"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-s","ux","web","webcomponents","zeta"],"created_at":"2024-12-06T07:07:31.919Z","updated_at":"2026-01-30T13:21:43.335Z","avatar_url":"https://github.com/ZebraDevs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 class='sbdocs-title'\u003e@zebra-fed/zeta-web\u003c/h1\u003e\n\n\u003cpicture\u003e\n  \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"./documentation/dark-wide.svg\"\u003e\n  \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"./documentation/light-wide.svg\"\u003e\n  \u003cimg alt=\"Fallback image description\" src=\"./documentation/light-wide.svg\"\u003e\n\u003c/picture\u003e\n\nZeta Web is a native web component library created by Zebra Technologies written in TypeScript.  \nThe Zeta Design System includes foundations, components, and best practices that can be used when building UX.\n\n## Previewing the components\n\nTo view examples of all the components in the library, you can pull this repo and run the Storybook instance.\n\nYou can also view the latest release at [Zeta](https://design.zebra.com/) or the latest commits to main [here](https://zeta-web-main.web.app/).\n\n## How to Use\n\nZeta Web Components can be directly used in many web frameworks including Angular and React (from v19).\n\n1. Install `@zebra-fed/zeta-web`\n\n   ```sh\n   # NPM\n   npm install @zebra-fed/zeta-web\n   # YARN\n   yarn add @zebra-fed/zeta-web\n   ```\n\n2. Import the global styles into the main app file\n\n   ```js\n   import \"@zebra-fed/zeta-web/index.css\";\n   ```\n\n   or in HTML,\n\n   ```html\n   \u003clink rel=\"stylesheet\" href=\"./node_modules/@zebra-fed/zeta-web/dist/style.css\" /\u003e\n   ```\n\n3. Import the desired Zeta Web Component, or the full package into your app:\n\n   ```js\n   // Individual button component\n   import \"@zebra-fed/zeta-web/dist/components/button/button.js\";\n\n   // or full package\n   import \"@zebra-fed/zeta-web\";\n   ```\n\n   or in HTML,\n\n   ```html\n   \u003c!-- Individual button component --\u003e\n   \u003cscript type=\"module\" src=\"./node_modules/@zebra-fed/zeta-web/dist/components/button/button.js\"\u003e\u003c/script\u003e\n\n   \u003c!-- or full package--\u003e\n   \u003cscript type=\"module\" src=\"./node_modules/@zebra-fed/zeta-web/\"\u003e\u003c/script\u003e\n   ```\n\n   To reduce bloat, we recommend only importing the components you will actually use into your project.\n\n4. Use the Web Component like any HTML element\n\n   ```html\n   \u003czeta-button\u003eHello world!\u003c/zeta-button\u003e\n   ```\n\n   ### Styles\n\nZeta styles are composed of primitives (basic value swatches such as `color-red-10`, `spacing-4`) and semantic tokens (descriptive values like `surface-default`, `spacing-large`, `avatar-purple`). These are imported via `index.css`.\n\nTo learn more about Zeta theme, see [tokens](https://design.zebra.com/docs/Theme/tokens).\n\nIf you only need the styles, simply import `index.css`. Importing `index.css` is not necessary if you are using the Zeta components, as they include the styles automatically.\n\nBy default, if the user has set `prefers-color-scheme` or `prefers-contrast`, this will be respected - serving light or dark; regular or high contrast tokens.\n\nTo override a theme, you can add `data-theme: light | dark` or `data-contrast: less | more` attributes to any element. This will cause any child element to respect that value.\n\n\u003e Note: If you want to apply `data-theme` or `data-contrast` within the shadow dom, you will need to inject the styles again.\n\n```ts How to inject Zeta index.css in a new custom lit element.\n// Importing styles into Lit\nimport * as zeta from \"@zebra-fed/zeta-web/index.css?raw\";\nimport { html, LitElement } from \"lit\";\n\n@customElement(\"a\")\nexport class A extends LitElement {\n  static styles = [unsafeCSS(zeta.default)];\n\n  // (Optionally) apply the data-* attribute to the whole element.\n  @property({ attribute: \"data-theme\", reflect: true }) theme = \"dark\";\n  @property({ attribute: \"data-contrast\", reflect: true }) contrast = \"more\";\n\n  protected override render() {\n    return html`\u003cdiv data-theme=\"dark\" data-contrast=\"more\"\u003e\n      // Or you can apply the data-* attributes to individual children\n    \u003c/div\u003e`;\n  }\n}\n```\n\n### React\n\nFrom React 19 web-components work natively. `zeta-web` can be imported into your React project and used directly in JSX.\n\n#### TypeScript and \"JSX.IntrinsicElements\" errors.\n\nAs of v0.5.3 this issue should no longer occur.\n\nIf you find TypeScript complains that `Property 'zeta-*' does not exist on type 'JSX.IntrinsicElements'`, you need to add the declared zeta components into React's JSX.IntrinsicElements namespace. To do this:\n\n```ts\nimport { CustomElements } from \"@zebra-fed/zeta-web/jsx.d.ts\";\n\ndeclare module \"react\" {\n  namespace JSX {\n    interface IntrinsicElements extends CustomElements {}\n  }\n}\n```\n\n## Developer Experience\n\nTo improve the development experience while using the zeta web-components, the following packages can be useful:\n\n### [`ts-lit-plugin`](https://www.npmjs.com/package/ts-lit-plugin)\n\nts-lit-plugin adds type checking and code completion to lit-html. To install, first setup typescript in your project, then run:\n\n```bash\n# NPM\nnpm install ts-lit-plugin -D\n\n# Yarn\nyarn add -D ts-lit-plugin\n```\n\nand add the plugin to your tsconfig.json:\n\n```json\n{\n  \"compilerOptions\": {\n    \"plugins\": [\n      {\n        \"name\": \"ts-lit-plugin\"\n      }\n    ]\n  }\n}\n```\n\n### [CSS Variable Autocomplete](https://marketplace.visualstudio.com/items?itemName=vunguyentuan.vscode-css-variables)\n\nThis extension makes working with CSS variables easier by showing the values of variables when you hover over them and displaying colors inline in the IDE.\nTo use this, install it in VSCode, and add the following into .vscode/settings.json:\n\n```json\n{\n  ...\n  \"cssVariables.lookupFiles\": [\n    \"node_modules/@zebra-fed/zeta-web/primitives.css\",\n    \"node_modules/@zebra-fed/zeta-web/semantics.css\",\n    // Add other css files here\n  ]\n}\n```\n\nThis configuration will show light mode / regular contrast tokens on hover.\n\n\u003e **Note:** The primitives.css file and semantics.css files should **not** be used in your app as these only contain a subset of the styles; rather import **index.css**, as this contains all rules.\n\n## Licensing\n\nThis software is licensed with the MIT license (see [LICENSE](./LICENSE) and [THIRD PARTY LICENSES](./LICENSE-3RD-PARTY)).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzebradevs%2Fzeta-web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzebradevs%2Fzeta-web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzebradevs%2Fzeta-web/lists"}