Custom Catalog

Concept: CatalogsGuide: Define your own

Two example trees assembled from the same custom A2UI v0.9 catalog (11 components, runs alongside the basic catalog) — toggle between them under Assembled Components.

Catalog Components

Row

Horizontal flex container. Accepts either a static array of child IDs or a v0.9 template `{ componentId, path }` that repeats one child per array element in the data model.

Preview

Usage

{
  "id": "row-1",
  "component": "Row",
  "gap": 16,
  "justify": "spaceBetween",
  "children": ["badge-1", "badge-2", "badge-3"]
}

Props

NameDescriptionDefault
children
Static list of child component IDs, or a `{ componentId, path }` template that expands once per item in the bound array.
string[] | { componentId, path }		—
gap
Pixel gap between children.
number		16
align
Cross-axis (vertical) alignment of children.
"start""center""end""stretch"
stretch
justify
Main-axis (horizontal) distribution of children.
"start""center""end""spaceBetween""spaceAround""spaceEvenly""stretch"
start