Installation

Install packages

pnpm

pnpm add @latty-ds/tokens @latty-ds/web

npm

npm install @latty-ds/tokens @latty-ds/web

yarn

yarn add @latty-ds/tokens @latty-ds/web

Load the tokens

Both CSS files must be loaded before any components render — import them once at your app's entry point.

JS / bundler

import '@latty-ds/tokens/tokens.css';
import '@latty-ds/tokens/semantic.css';

CSS @import

@import '@latty-ds/tokens/tokens.css';
@import '@latty-ds/tokens/semantic.css';

Plain HTML

<link rel="stylesheet" href="node_modules/@latty-ds/tokens/dist/tokens.css" />
<link rel="stylesheet" href="node_modules/@latty-ds/tokens/dist/semantic.css" />

Register components

// All components at once
import '@latty-ds/web';

// Or cherry-pick to keep bundles small
import '@latty-ds/web/button';
import '@latty-ds/web/textfield';
import '@latty-ds/web/dialog';

Components are self-registering custom elements. Once imported, use them anywhere in your HTML.

React wrappers (optional)

For typed props and idiomatic React event names, install the React wrapper package:

pnpm add @latty-ds/react

Vue and Svelte users don't need a wrapper — lt-* elements work natively in both. See the Usage guide for framework-specific setup.

TypeScript

All packages ship with .d.ts files — no extra setup needed.

Next steps

Usage — start using components

Theming — customize the look and feel