Z Web Components

Quick start

Get started with z-web-components, an opinionated set of web components for building strong and fast applications.

Installation

Via package manager

Install z-web-components into nearly any project with some of the most popular package managers.

npm i z-web-components

yarn add z-web-components

Add a browserslist key to your package.json file.

"browserslist": [
  ">2%",
  "Edge > 14",
  "Firefox > 63",
  "Chrome > 67"
]

Import the library in your javascript code.

import 'z-web-components'

Via CDN

You can also use any cdn provider that mirrors npm packages.

<!-- unpkg -->
<script src="https://unpkg.com/z-web-components"></script>

<!-- jsdeliver -->
<script src="https://cdn.jsdelivr.net/npm/z-web-components@latest"></script>

Usage

Use the elements in your website (more info on the individual documentation pages).

<z-input label="Text input with default value" value="default value"></z-input>

<z-textarea label="Textarea input with default value" value="default value"></z-textarea>

<z-checkbox label="checkbox input checked" checked></z-checkbox>

<z-toggle label="toggle input active" active></z-toggle>

<z-radio-group name="radio-demo" value="2">
    <z-radio label="radio input" value="1"></z-radio>
    <z-radio label="radio input" value="2"></z-radio>
</z-radio-group>

<z-tab-group>
    <z-tab label="tab-1">This is tab 1.</z-tab>
    <z-tab label="tab-2">This is tab 2.</z-tab>
    <z-tab label="tab-3">This is tab 3.</z-tab>
</z-tab-group>

Customisation

You can customize the default colors via CSS variables.

:root {
    --z-primary-color: #3A7;
    --z-secondary-color: #929595;
    --z-secondary-alt-color: #787C7C;
    --z-danger-color: #D22;
    --z-tick-color: #F2F5F5;
}