Get Component Recipe
get_component_recipeGet production-ready, accessible copy-paste UI component code in React Tailwind, HTML-CSS, SwiftUI, or Compose, complete with states, ARIA, keyboard support, and motion.
Instructions
Get production-ready, accessible reference CODE for a UI component in a chosen stack (react-tailwind, html-css, swiftui, compose) — not advice, actual copy-paste code with all states, ARIA/accessibility, keyboard support and correct motion, grounded in the SaglitzDesign specs. Use when you need to actually build a button, input, modal, toast, card, switch, tabs, empty-state, list-row, navigation, search, select, table, tooltip, form, pagination, skeleton, badge, or breadcrumb. Pair with get_component_guidance (the design rationale) and generate_design_tokens (the theme).
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| stack | No | Target stack. Omit to get the spec + all available stacks. | |
| scales | No | Your ramps, keyed by step — {"neutral":{"50":"#…",…,"950":"#…"},"primary":{…},"danger":{…}} — exactly the `neutral`, `primary` and `danger` scales generate_color_system returns. Swapped step for step, which is what themes the dark-mode shades too; role tokens alone leave those behind. | |
| tokens | No | Your colours, so the code comes back in them instead of the house palette. Roles: primary, primaryHover, danger, dangerHover, background, textPrimary. Pass the values create_design_system or generate_color_system produced, e.g. {"primary":"#0F62FE","primaryHover":"#0043CE"}. Omit to get the recipe as written. | |
| component | Yes | Component name, e.g. 'button', 'input', 'modal', 'toast', 'card', 'switch', 'tabs', 'empty-state', 'list-row', 'navigation', 'search', 'select', 'table', 'tooltip', 'form', 'pagination', 'skeleton', 'badge', 'breadcrumb' |