Recipes

Copy-paste templates for common UI layouts, organized from simplest to most complex.

Simple

Quick patterns — usually 10–20 lines of YAML.

• Landing hero — centered headline + tagline + CTA buttons
• Empty state — placeholder screen with icon + call-to-action
• Card grid — 3-across product/feature card layout
• Confirmation modal — delete-style confirm dialog

Forms

Form layouts demonstrating label alignment, grouped inputs, and validation states.

• Login form — centered mobile-width login + desktop variant with gutters
• Contact form — standard labeled form with select + textarea
• Settings panel — 2-column settings with grouped toggles
• Material registration (자재 등록) — complex Korean ERP form with sections, badges, and conditional fields

Layouts

Full-screen compositions — navbar + sidebar + main content patterns.

• Dashboard — classic admin dashboard in both grid and flex variants
• Email client — 3-panel inbox + list + reading pane
• Docs site — documentation layout with breadcrumb, sidebar, and content
• Pricing page — tier comparison cards
• Profile page — user profile with avatar header + tabs + details

Data

Displays heavy in tables, metrics, lists, and feeds.

• Admin table — user management table with search, tabs, pagination
• Analytics dashboard — KPI cards + chart placeholders + activity table
• Activity feed — timeline of events with badges

About the screenshots

Each recipe's screenshot is auto-generated from its YAML block by npm run gen:screenshots (headless Chromium with Obsidian CSS variable defaults). To contribute a new recipe, add a .md file here with a single ``ui-sketch fenced block, then run the script — the PNG lands indocs/img/recipes/`.