Getting Started

What is tuix-webcomponents?

tuix-webcomponents is the Tuix design system packaged as custom elements. Every component is a Lit element with its own shadow DOM, so the styles cannot leak in or out and the same tag works in React, Angular, Vue, plain HTML or a server-rendered page.

Fourteen elements ship today: typography, icons, buttons, links, surfaces, form controls, a data table, a toast and a modal. All of them share one colour palette and a light and a dark theme.

<tuix-text size="xl" color="primary">Hello</tuix-text>
<tuix-button variant="primary" iconleft="check">Save</tuix-button>

Install

npm package

Install the package and import the required elements.

Web bundle

One script tag and one stylesheet, no build step.

Add them to an application

React and Next.js

The generated wrappers, step by step.

Vue

Configure the compiler, bind properties, listen to events.

Angular

The schema, the bindings and reactive forms.

Then

How the components work

Attributes versus properties, events and slots: the shared rules.

Theming

Dark mode, the colour palette and the Rubik font.

Components

All fourteen elements, their variants and their API.

Icon catalog

All icon names accepted by tuix-icon.

Live examples

The examples on the component pages are live: the elements below are the real ones, running in this page.

Loading the components…

For a playground with editable controls for every property, the library's Storybook is deployed alongside this documentation at /storybook.

This documentation describes the public API. When an example and Storybook disagree, the source in src/ is the truth; corrections to the documentation are welcome as a pull request.