Tab · Build

Components

Find a component, see every page that uses it, before you change it. The component registry: every shared UI piece, its variants, and the pages and routes that depend on it.

See it in motion

Where to find it

  • Localhost: /components.html?repo=<id>
  • On disk: .claude/brain/components.md
  • Keyboard: ⌘ K then components
  • Sidebar: Build → Components

What it does for you

Used-by is part of the row.Every component lists the pages and routes that import it. Change a variant → you know in seconds what you might be breaking.
Reuse before reinvent.Before adding a new component, scan this list. Three similar pages is a hint; four is a component. A duplicate is a defect.
Variants are enumerated, not improvised.Each component lists its variants (size, intent, state). No one-off shadow on a single page; pick a variant or add one deliberately.

Configure

Components live under website/components/ and (for dashboard tabs) inline in public/*.html. New component → add the row here in the same PR.

Use it well

When changing a component's API, scan its used-by list and update each caller in the same PR. When extracting a new component, log its variants and initial used-by here. Components without used-by entries are orphans; either delete or wire up.

Read more