What is Latty?

Latty is a design system with a full component library, a token-based theme engine, and first-class framework support. Components work natively in HTML, Vue, and Svelte, and ship with typed React wrappers. One install, every framework.

What's included

@latty-ds/web

— The component library. Web Components with the lt- prefix covering form inputs, overlays, navigation, data display, and feedback patterns. No framework runtime required.

@latty-ds/tokens

— The theme engine. Generates a full color palette, spacing scale, and typography config as CSS custom properties from a single base color. Supports light, dark, and system themes out of the box.

@latty-ds/icons

— 800+ icons from the Iconoir library, already bundled inside @latty-ds/web. Install separately only if you need direct access to the icon registry API.

@latty-ds/react

— Typed React wrappers around @latty-ds/web with camelCase props and idiomatic event names. Optional — the web components also work directly in React.

Next steps

Installation — add Latty to your project

Usage — start using components in HTML, React, Vue, or Svelte

Theming — set your brand colors and customize the look