@zebra-fed/zeta-web

Zeta Web is a native web component library created by Zebra Technologies written in TypeScript.
The Zeta Design System includes foundations, components, and best practices that can be used when building UX.

🚧 Note: This package is in pre-release, and so many aspects are incomplete.

Previewing the components

To view examples of all the components in the library, you can pull this repo and run the Storybook instance.

You can also view the latest release at Zeta or the latest commits to main here.

How to Use

Zeta Web Components can be directly used in many web frameworks including Angular and React (from v19).

1. Install @zebra-fed/zeta-web

   # NPM
   npm install @zebra-fed/zeta-web
   # YARN
   yarn add @zebra-fed/zeta-web

2. Import the global styles into the main app file

   import "@zebra-fed/zeta-web/index.css";

   or in HTML,

   <link rel="stylesheet" href="./node_modules/@zebra-fed/zeta-web/dist/style.css" />

3. Import the desired Zeta Web Component, or the full package into your app:

   // Individual button component
   import "@zebra-fed/zeta-web/dist/components/button/button.js";
   
   // or full package
   import "@zebra-fed/zeta-web";

   or in HTML,

   <!-- Individual button component -->
   <script type="module" src="./node_modules/@zebra-fed/zeta-web/dist/components/button/button.js"></script>
   
   <!-- or full package-->
   <script type="module" src="./node_modules/@zebra-fed/zeta-web/dist/index.js"></script>

   To reduce bloat, we recommend only importing the components you will actually use into your project.

4. If you use any element that uses icons, you will also need to import the index.css from @zebra-fed/zeta-icons.

   🚧 Note: This is a temporary step for now. This will be automatically imported where needed in the future.

   import "@zebra-fed/zeta-icons/index.css";

   or in HTML,

   <link rel="stylesheet" href="./node_modules/@zebra-fed/zeta-icons/index.css" />

   Full list of icons can be found at Zeta Icons.

5. Use the Web Component like any HTML element

   <zeta-button>Hello world!</zeta-button>

React

From React 19 web-components work natively. zeta-web can be imported into your React project and used directly in JSX.

TypeScript and "JSX.IntrinsicElements" errors.

If 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:

import { CustomElements } from "@zebra-fed/zeta-web/jsx";

declare module "react" {
  namespace JSX {
    interface IntrinsicElements extends CustomElements {}
  }
}

Developer Experience

To improve the development experience while using the zeta web-components, the following packages can be useful:

ts-lit-plugin

ts-lit-plugin adds type checking and code completion to lit-html. To install, first setup typescript in your project, then run:

# NPM
npm install ts-lit-plugin -D

# Yarn
yarn add -D ts-lit-plugin

and add the plugin to your tsconfig.json:

{
  "compilerOptions": {
    "plugins": [
      {
        "name": "ts-lit-plugin"
      }
    ]
  }
}

Licensing

This software is licensed with the MIT license (see LICENSE and THIRD PARTY LICENSES).