Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zebradevs/zeta-web
Zebra Design System (Zeta) - Web Components
https://github.com/zebradevs/zeta-web
design-s ux web webcomponents zeta
Last synced: about 2 months ago
JSON representation
Zebra Design System (Zeta) - Web Components
- Host: GitHub
- URL: https://github.com/zebradevs/zeta-web
- Owner: ZebraDevs
- License: mit
- Created: 2024-12-03T17:01:48.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2024-12-03T17:39:53.000Z (about 2 months ago)
- Last Synced: 2024-12-03T17:49:31.015Z (about 2 months ago)
- Topics: design-s, ux, web, webcomponents, zeta
- Language: TypeScript
- Homepage: https://design.zebra.com
- Size: 0 Bytes
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
@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](https://design.zebra.com/) or the latest commits to main [here](https://zeta-web-main.web.app/).
## How to Use
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](https://www.npmjs.com/package/@zebra-fed/zds-react).
1. Install `@zebra-fed/zeta-web`
```sh
# NPM
npm install @zebra-fed/zeta-web
# YARN
yarn add @zebra-fed/zeta-web
```
2. Import the global styles into the main app file
```js
import "@zebra-fed/zeta-web/index.css";
```
or in HTML,
```html
```
3. Import the desired Zeta Web Component, or the full package into your app:
```js
// Individual button component
import "@zebra-fed/zeta-web/dist/components/button/button.js";
// or full package
import "@zebra-fed/zeta-web";
```
or in HTML,
```html
```
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](https://www.npmjs.com/package/@zebra-fed/zeta-icons).
> 🚧 **Note**: This is a temporary step for now. This will be automatically imported where needed in the future.
```js
import "@zebra-fed/zeta-icons/index.css";
```
or in HTML,
```html
```
Full list of icons can be found at [Zeta Icons](https://design.zebra.com/icons/).
5. Use the Web Component like any HTML element
```html
Hello world!
```
## Developer Experience
To improve the development experience while using the zeta web-components, the following packages can be useful:
1. [`ts-lit-plugin`](https://www.npmjs.com/package/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:
```bash
# NPM
npm install ts-lit-plugin -D
# Yarn
yarn add -D ts-lit-plugin
```
and add the plugin to your tsconfig.json:
```json
{
"compilerOptions": {
"plugins": [
{
"name": "ts-lit-plugin"
}
]
}
}
```
## Licensing
This software is licensed with the MIT license (see [LICENSE](./LICENSE) and [THIRD PARTY LICENSES](./LICENSE-3RD-PARTY)).