Installation

There are two ways to get the components into an application: the npm package (for anything with a bundler) and the prebuilt web bundle (for a page without a build step).

npm package

Install the package.

npm i tuix-webcomponents

Import the required elements. Importing registers the custom element, so a side-effect import is enough.

// everything
import 'tuix-webcomponents'
 
// or a single element and its enums
import { TuixButton, MainVariant } from 'tuix-webcomponents'

Add the design tokens stylesheet once, at the root of the app.

import 'tuix-webcomponents/dist/assets/tuix-styles.css'

It defines the --tuix-light-color-* and --tuix-dark-color-* custom properties on :root. The components carry their own colours, so this is only needed when the app itself uses the palette.

The stylesheet also pulls in Rubik, the font the components' typography expects, so nothing else is needed. To start the font request without waiting for the CSS import, add the link to the document head as well:

<link rel="preconnect" href="https://hccdn.tuix.ch" />
<link rel="stylesheet" href="https://hccdn.tuix.ch/rubik_d444e2375d.css" />

See Theming.

Web bundle

The CI publishes a self-contained bundle and the matching stylesheet to S3 on every release. Neither needs a bundler:

<link rel="stylesheet" href="https://tuix-webcomponents.s3.eu-central-1.amazonaws.com/[email protected]" />
<script src="https://tuix-webcomponents.s3.eu-central-1.amazonaws.com/[email protected]"></script>
 
<tuix-button variant="primary">Save</tuix-button>

The bundle registers all custom elements on load. Do not combine it with the npm package on the same page: the second registration of a tag name throws.

Requirements

Requirement	Note
Browsers	Chrome 119+, Firefox 119+, Edge 118+, Safari 17+ (the targets the bundle is built for)
Node	20 or superior
Peer runtime	None for the elements: `lit` is the package's only runtime dependency
Peers	`react` and `@lit/react`, optional, and only for `tuix-webcomponents/react`

TypeScript

The package ships its own types (dist/src/index.d.ts). Beyond the element classes it exports the enums used by the attributes and the typed custom events:

import { type CustomEventTuixInput, IconName, InputType, Palette, TuixInput } from 'tuix-webcomponents'

In a .tsx file, custom elements are not part of JSX.IntrinsicElements. The package ships ready-made React wrappers for that, under tuix-webcomponents/react; see the React guide.

Editor support

The package points its customElements field at a custom elements manifest, custom-elements.json, describing every tag with its attributes, properties, events and slots. Editors that read it (VS Code and the JetBrains IDEs, through their web-components support) then autocomplete the tags and their attributes in plain HTML, with no extra configuration beyond installing the package.