Component Reference
Every A2UI type the renderer understands, with its key props.
This is the catalog of A2UI type values. Properties go directly on the component
object (not under props). Colors are strings ("0xFF007AFF") or
semantic tokens. The canonical source is the A2UI schema in
the A2UI schema.
The Widget Index has a dedicated page for every smart component — with an example chat prompt, the exact A2UI JSON it produces, and its full property table. This page is the quick lookup; the index is the deep dive.
Layout primitives
| Type | Key props |
|---|---|
container | padding, color, borderRadius, shadow, child |
row | spacing, mainAxisAlignment, children, wrap |
column | spacing, mainAxisAlignment, children |
stack | alignment, clip, children |
positioned | left, top, right, bottom, width, height, child (inside stack) |
align | x (−1…1), y (−1…1), child |
center | child |
padding | padding (num / [v,h] / [l,t,r,b] / object), child |
transform | rotateZ, scale, translateX, translateY, child |
fractionally_sized_box | widthFactor, heightFactor, child |
wrap | spacing, runSpacing, mainAxisAlignment, children |
grid | crossAxisCount, mainAxisSpacing, crossAxisSpacing, childAspectRatio, children |
sized_box | width, height |
divider | — |
text | content, size (small/medium/large), color |
icon | name, size, color |
progress | value (0–100), label, color |
Interactive
| Type | Key props |
|---|---|
button | label, style (primary/outlined/text/danger), icon, action |
slider | min, max, value, label, action |
toggle | value, action |
input_text | placeholder, id, action |
dropdown | options, value, label, action |
Don't place input_text, slider, progress, or dropdown directly inside a row —
wrap in expanded or give an explicit width. Don't use expanded/flexible/spacer
outside a row or column.
Animated
| Type | Key props |
|---|---|
animated_value | from, to, prefix, suffix, duration, color, size |
gauge | value, max, label, color, size |
sparkline | values, color, height, width |
chart | subtype (line/bar/pie/scatter), title, data (≤100 pts), labels, xLabel, yLabel, minY, maxY |
pulse | glowColor, intensity, child |
typing_text | content, charDelay, color |
fade_in_column | staggerDelay, spacing, children |
Smart components — Tier 1 (pure client)
live_timer · countdown · live_clock · pomodoro · metronome · dice_roller ·
coin_flip · tic_tac_toe · snake_game · quiz · habit_tracker · breathing ·
tip_calculator · bmi_calculator · password_generator · color_picker ·
drawing_canvas · flashcards · poll · markdown_editor · pixel_art · whiteboard
Smart components — Tier 2 (hybrid)
live_weather · live_stock · currency_converter · news_ticker · wiki_summary ·
dictionary · translator · rss_reader · astronomy · live_sports · recipe_viewer
Smart components — Tier 3 (persistent)
todo_list · notes · journal · budget_tracker · reading_list · kanban_board ·
code_snippets · bookmarks · contacts
Tier 4+ (platform / experimental)
| Type | Key props |
|---|---|
data_bound | dataSource (url), refreshMs, display (text/metric/json), label |
dashboard | template (project/monitoring/study/fitness), title |
pipeline | stages (fetch/transform/filter/count/extract…) |
writing_assistant | content, mode (general/email/code/creative) |
custom_widget | id |
3d_scene | shapes, autoRotate, wireframe |
scene_3d | height, width, shapes, autoRotate, wireframe (orbit controls) |
Educational visualizations
| Type | Key props |
|---|---|
animated_svg | content (SVG), width, height, backgroundColor |
diagram | title, svg, labels, width, height |
node_graph | title, height, nodes, edges |
calendar_view | events, view (month/week/day), height |
SVG animation classes
animate-rise · animate-flow · animate-pulse · animate-smoke · animate-bubble ·
animate-spin · animate-orbit · animate-heartbeat · animate-float · animate-draw
Colors
Hex strings or theme-adaptive semantic tokens:
| Token | Meaning |
|---|---|
primary / textPrimary | Main text |
secondary / textSecondary | Subdued text |
muted / textMuted | Faint text |
accent / accentColor | Brand highlight |
surface / surfaceBg | Surface background |
card / cardBg | Card background |
border / borderColor | Borders |
success · error · warning | Status colors |
Top-level props
| Prop | Values |
|---|---|
theme | dark (default) · light · glassmorphic |
jit_bind | Key into a JIT code-output dict (see JIT) |
Actions
"action": { "payload": { "command": "kill_process", "pid": "1234" } }Commands: kill_process, set_volume, set_brightness, toggle_wifi,
run_command (with value), open_app, refresh.