diff --git a/README.md b/README.md index 4f4aa90..fc7164d 100644 --- a/README.md +++ b/README.md @@ -9,55 +9,74 @@ The Zeta Design System includes foundations, components, and best practices that 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://zeta-ds.web.app/) or the latest commits to main [here](https://zeta-web-main.web.app/). +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 -Zeta Web Components can be directly used in many web frameworks. +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 - # Future install instructions # NPM npm install @zebra-fed/zeta-web # YARN yarn add @zebra-fed/zeta-web ``` -2. Import the desired Zeta Web Component into your app: +2. Import the global styles into the main app file ```js - /* Import the component in the JS/TS file where it is used */ + 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"; - /* Import the Global Styles into the main App file */ - import "@zebra-fed/zeta-web/index.css"; + // or full package + import "@zebra-fed/zeta-web"; ``` or in HTML, ```html - + + + + ``` - You can also import the full package: + 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-web"; + import "@zebra-fed/zeta-icons/index.css"; ``` -3. If you use any element that uses icons, you will also need to import the index.css from [@zebra-fed/zeta-web](https://www.npmjs.com/package/@zebra-fed/zeta-icons) - This is a temporary step for now. This will be automatically imported where needed in the future. + or in HTML, ```html - + ``` -4. Use the Web Component like any HTML element + 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! @@ -92,3 +111,7 @@ To improve the development experience while using the zeta web-components, the f } } ``` + +## Licensing + +This software is licensed with the MIT license (see [LICENSE](./LICENSE) and [THIRD PARTY LICENSES](./LICENSE-3RD-PARTY)).