@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. Like any native handler they receive the event itself, typed with its payload on e.detail, so stopPropagation(), preventDefault() and target all work:

<Button onClick={handleClick}>Click me</Button>
<Switch onChange={(e) => setOn(e.detail.checked)} />
<Textfield onInput={(e) => setQuery(e.detail.value)} />
<Alert closable onClose={(e) => e.stopPropagation()}>Saved</Alert>

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