Component contracts

77 contracts seed automatically with each new project, across six categories — forms, display, navigation, layout, data, and media. Edit any one from /projects/<id>/contracts in the dashboard.

A contract has:

• Description — one sentence on when to reach for the component
• Variants — visual styles like primary / tinted / plain, each with an optional one-line description
• Sizes — the size scale (sm, md, lg)
• Slots — JSX entry points (children, icon, prefix, …), optional required flag for compound components
• Rules — plain-language constraints AI must follow when generating this component (drag-to-reorder)
• Examples — good and bad code snippets, each with an optional caption explaining why

Default set

77 contracts span six categories — forms (Button, Input, Select, Form, …), display (Card, Dialog, Toast, …), navigation, layout, data, and media.

AI tools query these via the MCP get_component_contract tool before writing code for that component.

Authoring tips

• Keep the description tight — it lands in the AI's prompt.
• Use the slots section for compound components like Card.Header / Card.Body / Card.Footer — the AI uses slots to scaffold the right shape.
• Use bad examples liberally. AI tools weight negative examples heavily when avoiding lookalike anti-patterns.
• Toggling a contract off removes it from the manifest, so AI tools fall back to free-form generation for that component.