---
name: lode
description: Build React UI with Lode UI. Use when the task needs product UI (forms, dashboards, settings, pricing, landing sections, charts, overlays, motion) in a React + Tailwind project that uses or can use the shadcn CLI.
---

# Lode UI

Lode is a React component and block library installed with the shadcn CLI. Every item lands in the project as plain TSX the team owns. Search Lode before writing UI by hand.

## Workflow

1. **Name the job.** Write one sentence: who is on this screen and what they must get done.
2. **Search first.** Use the Lode MCP server (`list_components`, `get_component`) or https://lodeui.com/llms.txt. Prefer a block when one matches the whole screen; otherwise compose components.
3. **Read the doc before using an item.** Every item has "When to use", "When not to use", usage, props, keyboard and accessibility notes: https://lodeui.com/components/<name>/markdown.
4. **Install, don't paste.** Use one shadcn command for every item (`get_install_command`). Free: `npx shadcn@latest add https://lodeui.com/r/<name>.json`. Pro: `npx shadcn@latest add @lode/<name>`.
5. **Compose.** Follow composition.md: one primary action per region, real states (empty, loading, error), real copy.
6. **Verify.** Run the checks in review.md at 375, 768 and 1280 px, in light and dark.

## Principles

- Tokens, not colors. Use `bg-background`, `text-muted-foreground`, `border-border`, `bg-brand`. Never hard-code hex values in components.
- Motion explains a change. Keep it under 400 ms and respect reduced motion.
- Every interactive element is reachable and operable by keyboard, with a visible focus state.
- Copy is specific: name the thing and the outcome ("Invite 3 people", not "Submit").

## Never

- Never re-implement something Lode already ships (dialogs, menus, date pickers, tables, toasts).
- Never edit installed files to change the theme; change tokens instead.
- Never invent props. Read the API table in the item's markdown.
- Never ship Lorem ipsum, placeholder avatars from random services, or fake brand logos.
- Never commit an API key. Keep it in `.env.local` as `LODE_API_KEY`.

## Quick decisions

| Need | Reach for |
| --- | --- |
| Quick choice from a short list | `toggle-group` or `segmented-control` |
| Long list, type to filter | `combobox` or `command-palette` |
| Confirm a destructive action | `hold-to-confirm` or a dialog with the object's name |
| Show a number that changes | `number-ticker` / `animated-number` |
| Explain a trend | a chart with a one-line takeaway above it |
| Whole screen | a block: dashboards, settings, auth, pricing, checkout |

## Files

- INSTRUCTIONS.md: short always-on rules for AGENTS.md, CLAUDE.md or Cursor rules
- design.md, copy.md, components.md, composition.md, motion.md, accessibility.md, responsive.md, review.md
- example-settings.md, example-pricing.md, example-dashboard.md: worked examples