Tostada
Try Tostada Join Slack

Using Tostada in your codebase

Route: Developer (top-level nav)

The Developer page is how a developer adopts your design system. It does two things: it exports a committable bundle, and it lets you browse and grab exactly what you need.

Export the bundle

Click Export bundle in the Developer page header. You get a ZIP containing a design/ folder plus a tostada.json snapshot:

design/
├── README.md              # what each file is + how to wire it in
├── tokens.css             # :root + .dark CSS custom properties
├── theme.css              # Tailwind v4 @theme → utilities (bg-bg-accent, text-fg-default, font-heading…)
├── layout-principles.md   # shells / layouts / overlays / navigation
├── design-system.json     # machine-readable: tokens + principles + components (rules + snippets)
└── AGENTS.md              # orientation + workflows + per-component do/don't + snippets for AI agents

Unzip it into your repo, keeping design/ at ./src/design/, and commit it.

Wire it in

/* your CSS entry */
@import './design/tokens.css';
@import './design/theme.css';   /* only if you use Tailwind v4 */

Point your AI coding agent at the system by dropping AGENTS.md at your repo root (Claude Code / Cursor auto-discover it) or @-referencing it.

Regenerate from the CLI

Keep the bundled tostada.json at your repo root and run:

npx tostada-ui export        # writes ./src/design (auto-finds ./tostada.json)
npx tostada-ui export --from ./design.json --out ./packages/ui/design

Wire it into CI to fail the build when the committed bundle drifts from the library.

Browse + grab snippets

The Library browser lists every token, component, and principle.

  • Component → a playground: live preview, do/don't rules, and an editable snippet. Toggle variants (Controls) and the preview, rules, and snippet update together; edit the JSX freehand and watch the preview re-render; Copy the result.
  • Token → name, value, dark value, references; Copy returns var(--id).
  • Principle → kind, structure, application tags; Copy returns its name.

What's deferred

A hosted, always-current bundle URL (no manual re-export) is a separate follow-up. For now the bundle is a snapshot you commit and regenerate.