Getting started

LatticeUI ships as three small packages: tokens (CSS variables), styles (zero-runtime CSS recipes), and the React components. Three steps and you are rendering accessible UI.

1. Install

pnpm add latticeui-react latticeui-styles latticeui-tokens

2. Import the CSS once

Add the two stylesheets to your app entry (e.g. app/layout.tsx in Next.js). All library styles live inside @layer latticeui, so they can never override your own CSS.

import "latticeui-tokens/tokens.css";
import "latticeui-styles/index.css";

3. Use components

import { Button, TextField, Dialog } from "latticeui-react";

export function Example() {
  return (
    <Dialog.Root>
      <Dialog.Trigger>Open settings</Dialog.Trigger>
      <Dialog.Content>
        <Dialog.Title>Settings</Dialog.Title>
        <TextField label="Display name" />
        <Button>Save</Button>
        <Dialog.Close />
      </Dialog.Content>
    </Dialog.Root>
  );
}

Toasts need a provider

Wrap your app once with ToastProvider; then call useToast() anywhere.

import { ToastProvider } from "latticeui-react";

<ToastProvider>{children}</ToastProvider>

Dark and light themes

The default theme is dark. Switch by setting data-theme on the root element - no JavaScript re-render involved, it is pure CSS variables.

document.documentElement.dataset.theme = "light"; // or "dark"

Server components

Every component is client-ready ("use client" is baked into the bundle) and the CSS has no runtime, so LatticeUI works out of the box with React Server Components and streaming SSR.

Prefer owning the code?

Instead of importing from the package you can eject any component's source into your repo with the CLI - and still receive upstream improvements via 3-way merge. See Eject & update.