AI → json-render → UI

Collapsible sections. Items as [{title, content}]. Type 'single' (default) or 'multiple'.

Alert banner

User avatar with fallback initials

Status badge

Vertical bar chart

Clickable button. primary = solid fill, outline = bordered/transparent, secondary = muted fill. Bind on.press for handler.

Segmented button group. Use { $bindState } on selected for selected value.

Container card for content sections. Use for forms/content boxes, NOT for page headers.

Horizontally scrollable carousel of cards.

Checkbox input. Use { $bindState } on checked for binding.

Collapsible section with trigger. Children render inside.

Modal dialog. Set openPath to a boolean state path. Use setState to toggle.

Bottom sheet drawer. Set openPath to a boolean state path. Use setState to toggle.

Dropdown menu with trigger button and selectable items.

Grid layout (1-6 columns)

Heading text (h1-h4)

Lucide icon by name. PascalCase: MapPin, Mail, Globe, Calendar, Star, Heart, Check, X, ArrowRight, Phone, Building, Clock, Shield, Zap, Users, Eye, Download, Upload, Search, Filter, Settings, Bell, ChevronRight, ExternalLink, Info, AlertTriangle, CheckCircle, XCircle. Use in horizontal Stacks with Text for icon+label patterns. Never use emoji — always use Icon.

Placeholder image (displays alt text in a styled box)

Text input field. Use { $bindState } on value for two-way binding. Use checks for validation (e.g. required, email, minLength).

Line chart with points

Anchor link. Bind on.press for click handler.

Key metric / stat display. Shows a large value with label and optional change indicator. Use for dashboard KPIs.

Page navigation. Use { $bindState } on page for current page number.

Popover that appears on click of trigger.

Progress bar (value 0-100)

Radio button group. Use { $bindState } on value for binding.

Interactive star rating. Use { $bindState } on value for binding. Set interactive: false for read-only display.

Dropdown select input. Use { $bindState } on value for binding. Use checks for validation.

Visual separator line

Loading placeholder skeleton

Range slider input. Use { $bindState } on value for binding.

Loading spinner indicator

Flex container for layouts

Toggle switch. Use { $bindState } on checked for binding.

Data table. columns: header labels. rows: 2D array of cell strings, e.g. [["Alice","admin"],["Bob","user"]].

Tab navigation. Use { $bindState } on value for active tab binding.

Paragraph text. In repeat scopes, use { "$template": "${field1} ${field2}" } to interpolate item fields.

Multi-line text input. Use { $bindState } on value for binding. Use checks for validation.

Toggle button. Use { $bindState } on pressed for state binding.

Group of toggle buttons. Type 'single' (default) or 'multiple'. Use { $bindState } on value.

Hover tooltip. Shows content on hover over text.