Component Catalog
a2ui-shadcn supports all 30+ components from the A2UI v0.9 standard catalog. Each component is fully documented with props, examples, and live previews.
Browse by Category
Click on any component to view detailed documentation with interactive examples.
Layout Components
Containers for organizing and structuring your UI:
- Column - Vertical flex container that stacks children
- Row - Horizontal flex container for side-by-side layouts
- Card - Content card with border and padding
Content Components
Components for displaying information:
- Text - Typography with semantic variants (h1-h6, body, caption)
Input Components
Form inputs for collecting user data:
Interactive Components
Components that respond to user interactions:
- Button - Clickable button with multiple variants and actions
Feedback Components
Components for status and notifications:
- Badge - Label for status, tags, and categories
Reactive Behavior
Components support two reactive patterns:
- Data binding: Use
{ "path": "/key" }forvalue,text,checked, etc. Inputs write to the data model on change; display components read from it. Updates are instant and local. - Actions: Use
action: { event: { name, context } }on buttons and links. Context can include path bindings that resolve to current values when the user clicks. See Actions for details.
How a2ui-shadcn Handles Reactivity & Actions
Two reactive flows: instant local updates (inputs) and agent-bound actions (buttons)
Two-Way Binding (Inputs)
1
User types/checks
TextField, CheckBox, Slider
2
dataModel.set(path, value)
Immediate local update (no server)
3
Store notifies subscribers
Zustand subscription
4
Bound components re-render
Text, display components update
User Actions (Buttons, Links)
1
User clicks
Button/Link with action.event
2
Resolve context recursively
{ path } -> values, { call } -> exec
3
Build action payload
name, context, sourceComponentId
4
Add dataModel (if sendDataModel)
Full state snapshot included
5
onAction + transport
To parent callback / WebSocket / SSE
Key Concepts:
- Path bindings:
{ path: "/key" }- resolved to current data model value - FunctionCall:
{ call: "formatDate", args: {...} }- executed and result included in context - sendDataModel: When enabled in createSurface, full data model sent with every action
Quick Example
Here's how to use components in A2UI JSON:
json
Next Steps
- Explore individual component pages for detailed props and examples
- Try components in the Interactive Playground
- Learn about Theming to customize component appearance