Component Catalogue

Run /kit-list in a Claude Code session to see the live catalogue with the full generation contract for each component.

Quick reference

Category	Components
Simple	badge, icon, link, divider
Interactive	button, checkbox, toggle, tabs
Form	field, input, select, textarea, form-group
Layout	card, alert, banner
Complex	dialog, nav, popover, table, toast

Each component entry shows: props interface, CSS tokens (--comp-*), dependencies, ARIA behavior, and a usage example.

Simple components

Badge

<span style="display:inline-flex;align-items:center;padding:0.2em 0.6em;border-radius:9999px;font-size:0.75rem;font-weight:600;background:var(--color-primary);color:var(--color-text-inverse);">Badge</span>

Example link

<a href="#" style="color:var(--color-primary);text-decoration:underline;text-underline-offset:2px;">Example link</a>

Interactive components

<button style="padding:0.5em 1.25em;border-radius:0.375rem;border:none;background:var(--color-primary);color:var(--color-text-inverse);font-weight:600;cursor:pointer;">Primary button</button>
<button style="padding:0.5em 1.25em;border-radius:0.375rem;border:1px solid var(--color-border-strong);background:transparent;font-weight:600;cursor:pointer;margin-inline-start:0.5rem;">Secondary button</button>

Checkbox label

<label style="display:inline-flex;align-items:center;gap:0.5rem;cursor:pointer;">
<input type="checkbox" style="accent-color:var(--color-primary);width:1rem;height:1rem;" />
Checkbox label
</label>

Layout components

Card title

Card body content goes here.

<div style="border:1px solid var(--color-border);border-radius:0.5rem;padding:1.25rem;background:var(--color-surface);">
<h3 style="margin:0 0 0.5rem;font-size:1rem;font-weight:600;">Card title</h3>
<p style="margin:0;color:var(--color-text-muted);font-size:0.875rem;">Card body content goes here.</p>
</div>

Info This is an informational alert message.

<div role="alert" style="display:flex;gap:0.75rem;padding:1rem;border-radius:0.5rem;border:1px solid var(--color-info);background:color-mix(in oklch,var(--color-info) 12%,var(--color-surface));">
<span style="font-weight:600;color:var(--color-info);">Info</span>
<span style="color:var(--color-text);">This is an informational alert message.</span>
</div>

To inspect a specific component:

/kit-list button
/kit-list dialog
/kit-list card