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.
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.
Zeta Web Components can be directly used in many web frameworks.
⚛️ Note: Using React? Zeta is not ready just yet. Whilst you wait, you can use zds_react.
Install @zebra-fed/zeta-web
# NPM
npm install git+https://github.com/zebratechnologies/zeta-web.git
# YARN
yarn add git+https://github.com/zebratechnologies/zeta-web.git
# Future install instructions
# NPM
npm install @zebra-fed/zeta-web
# YARN
yarn add @zebra-fed/zeta-web
Import the desired Zeta Web Component into your app:
/* Import the component in the JS/TS file where it is used */
import "@zebra-fed/zeta-web/dist/components/button/button.js";
/* 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"
/>
<script
type="module"
src="./node_modules/@zebra-fed/zeta-web/dist/components/button/button.js"
></script>
You can also import the full package:
import "@zebra-fed/zeta-web";
If you use any element that uses icons, you will also need to import the index.css from @zebra-fed/zeta-web This is a temporary step for now. This will be automatically imported where needed in the future.
<link
rel="stylesheet"
href="./node_modules/@zebra-fed/zeta-icons/dist/style.css"
/>
Use the Web Component like any HTML element
<zeta-button>Hello world!</zeta-button>
To improve the development experience while using the zeta web-components, the following packages can be useful:
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"
}
]
}
}