Components

Route: Library → Components

Tostada vendors 56 components and 27 blocks. The Components surface lets you browse them, see every variant rendered with your tokens, and author the application rules that travel with the export.

The index

The landing view shows a filterable grid:

• Search box — type to filter by component name (case-insensitive).
• Component cards — each tile shows the component name, its variant count, and the number of tokens it consumes.
• Click a card → navigates to the detail page at /library/components/<name>.

The detail page

Each component has its own page. The layout:

• Header — component name + prev/next arrows. Prev/next cycle alphabetically and wrap around at the ends.
• Hero preview — the full component rendered in the preview iframe with your tokens applied.
• Variant rows — one row per CVA variant (e.g. Button's variant: primary | secondary | outline | ghost | link | destructive). Each row renders an isolated preview parametrized by that variant's props.
• Info panel — three tabs: Application Rules · Code · Tokens used.

Application Rules tab

Authoring surface for Do / Don't / Notes at both component level and per variant. A per-variant override shows an override badge; the Reset button restores the base.

Code tab

Shows three blocks:

• Install — npx shadcn add <name>
• Imports — the import statement(s) for the component
• Usage — a snippet that uses the current variant's props

A Copy button writes the active block to the clipboard.

Tokens used tab

Lists every component-tier token the component consumes (detected by regex-scanning the component source during sync). Each token shows its light and dark resolution, with swatches.

Live previews

Previews iframe into the preview-host sandbox at :5179. The token broadcast happens automatically through postMessage — edit any token in another tab and the preview restyles.

A diagnostic badge in the bottom-right of every preview shows:

• ● tokens (green) — broadcast received, rendering with your library
• ○ placeholder (amber) — no broadcast yet, rendering with stock component defaults

Opening previews standalone

Each preview has an Open in new tab link that loads the preview-host's standalone route (http://localhost:5179/#button, #variant/button?variant=outline, etc.). Useful for sharing a single preview without the surrounding chrome.

Parametric variant rendering

Nine components have hand-written variant adapters (button, badge, alert, empty, tabs, item, toggle, button-group, field) — each variant row renders with its own props instead of all rows showing the shared demo. Components without an adapter fall back to the component demo.

The list of adapted components grows as component adds CVA components and we author the corresponding adapter. See REBUILD_PLAN.md → M9 for the deferred work.