Lumen UI React

Read the Lumen rules first

Lumen ships its own rules for components, Tailwind tokens and typography. Read them before writing UI: apps/ledger-live-desktop/node_modules/@ledgerhq/lumen-ui-react/ai-rules/RULES.md.

The file exists once pnpm i has run. pnpm links @ledgerhq/lumen-ui-react under the packages that depend on it, not at the repo root. If the path is missing, open ai-rules/RULES.md in the installed @ledgerhq/lumen-ui-react package of any web consumer.

Map the contract onto Lumen

The rules both platforms follow are in universal-components. On web, X.web.tsx maps:

// ContactsButton.web.tsx
import {
  Card,
  CardContent,
  CardContentTitle,
  CardHeader,
  CardLeading,
} from "@ledgerhq/lumen-ui-react";
import type { ContactsButtonProps } from "./ContactsButton.types";

export function ContactsButton({ title, onOpenContacts, testID }: ContactsButtonProps) {
  return (
    <Card type="interactive" onClick={onOpenContacts} data-testid={testID}>
      <CardHeader>
        <CardLeading>
          <CardContent>
            <CardContentTitle>{title}</CardContentTitle>
          </CardContent>
        </CardLeading>
      </CardHeader>
    </Card>
  );
}

What stays in the web file

These never appear in the contract. The web file owns them:

• Lumen imports and Lumen props types (@ledgerhq/lumen-ui-react).
• Gesture and DOM event props: onClick, onChange, onSubmit, onFocus, onBlur, onKey*.
• Event objects: ChangeEvent, SyntheticEvent, MouseEvent.
• data-testid, which the contract spells testID.
• className, style, CSSProperties and Tailwind classes.
• Refs to HTML*Element.