Showcases
Each case is a self-contained A2UI stream rendered into Flab components. Open one to edit the stream live and watch the UI rebuild.
Contact form
A card-wrapped form with a two-way bound field, a checkbox, live email validation, and a submit that dispatches an action once the checks pass.
Registration form
A richer form exercising every input type — text, select, radio group, multi-select, switch and date — with required-field validation gating the submit.
Team table
A DataTable whose columns are declared inline and whose rows bind to an array in the data model.
Activity list
A List that iterates an array via a template, using @index for row numbers and per-item relative bindings.
Service dashboard
A data-dense dashboard: a KPI stat strip, a health Gauge, resource Meters, and a services DataTable — all bound to one data model.
Sprint board
A Kanban board whose columns and cards are entirely data-driven — edit the data model to move work across stages.
Contributor profile
A composed detail view: an avatar header, KPI stats, tag badges, a callout, and an activity Timeline bound to the data model.
Agent legion
The AgentLegion component driven entirely by A2UI: a roster of agent cards and a pipeline data-flow view, with one shared selection. Click a card or a flow node and it highlights in both — selection is bound to /selectedId, so the two views stay in sync with no extra wiring.
Data pipeline
A standalone Flow canvas driven by A2UI: nodes and edges bind to the data model, and node selection binds to /selected so clicking a stage highlights it. Pan, zoom and fit with the built-in controls.
Panel & navigation
An app panel composing the navigation primitives: a Breadcrumb trail, a Tabs switcher whose active tab binds to the data model (one panel is a live Timeline), and a multi-select FilterChip row.
Loading, empty & error
The feedback states an agent needs while data is in flight: Skeleton placeholders, an EmptyState, an ErrorState whose retry dispatches an action, and a DetailPanel of key/value rows.
Task board
A draggable issue board driven by A2UI. Columns and cards bind to the data model; dragging a card to another column rewrites its column and order in the model — the A2UI two-way binding, no agent round-trip.
Filter tree
A hierarchical facet: a nested, searchable tree whose active selection binds to /selected. Picking a node writes it back to the data model and a bound summary reflects the choice.
Program schedule
A Gantt schedule: period columns with a bar per row, each carrying a progress fill and a trailing figure. Entirely data-driven — edit the rows to re-plan.
Week calendar
A week view driven by A2UI: days and events bind to the data model, laid on an hourly grid. Overlapping events pack into side-by-side columns.