@latty-ds/react

React wrappers for the Latty design system — typed React components backed by @latty-ds/web.

Each component is a thin wrapper that forwards props to the underlying Web Component, handles React's synthetic event system, and provides full TypeScript types.

Requirements

• React 18 or 19
• @latty-ds/tokens and @latty-ds/web must be installed and their CSS imported

Installation

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

Setup

Import the CSS tokens once in your app entry point:

/* your global stylesheet */
@import '@latty-ds/tokens/tokens.css';
@import '@latty-ds/tokens/semantic.css';

Usage

import { Button, Textfield, Badge, Spinner } from '@latty-ds/react';

function App() {
  return (
    <form>
      <Textfield label="Email" type="email" required />
      <Button variant="primary" onClick={() => console.log('saved')}>
        Save changes
      </Button>
      <Badge variant="success">Active</Badge>
    </form>
  );
}

Events

React wrappers map custom events to onEventName props:

<Button onClick={handleClick}>Click me</Button>
<Switch onChange={handleChange} />
<Textfield onInput={handleInput} />

All components

All components from @latty-ds/web are available as named exports:

import {
  Accordion,
  Alert,
  Avatar,
  Badge,
  Breadcrumb,
  BreadcrumbItem,
  Button,
  Checkbox,
  Chip,
  Dialog,
  Divider,
  Dropdown,
  Header,
  Link,
  List,
  Nav,
  Progress,
  Radio,
  RadioGroup,
  Select,
  Skeleton,
  Slider,
  Snackbar,
  Spinner,
  Surface,
  Switch,
  Tab,
  TabGroup,
  Table,
  Text,
  Textfield,
  Tooltip
} from '@latty-ds/react';

TypeScript

All components are fully typed. Props mirror the Web Component's properties:

import type { ButtonProps } from '@latty-ds/react';

function MyButton(props: ButtonProps) {
  return <Button {...props} />;
}

How it works

The wrappers are auto-generated from custom-elements.json (the Custom Elements Manifest produced by @latty-ds/web). Run pnpm codegen:wrappers in the repo root after modifying web components to regenerate them.

License

MIT