Component Catalog
Column
Vertical flex container with gap, justify, and align options.
A2UI → Nuxt UI Mapping
| A2UI Property | CSS Result |
|---|---|
children | Child components rendered vertically |
gap | Tailwind gap class (gap-1 to gap-8) |
Example JSONL
{"version":"v0.10","createSurface":{"surfaceId":"col_demo","catalogId":"standard"}}
{"version":"v0.10","updateComponents":{"surfaceId":"col_demo","components":[
{"id":"root","component":"Column","children":["title","desc","action"]},
{"id":"title","component":"Text","text":"Welcome","variant":"h2"},
{"id":"desc","component":"Text","text":"This is a vertically stacked layout using Column."},
{"id":"action","component":"Button","label":"Continue","variant":"primary"}
]}}
Properties
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
children | string | ✅ | — | Array of child component IDs |
gap | number | — | 2 | Gap between children (Tailwind scale) |
Rendering Details
- Renders as
flex flex-col - The most commonly used container — the AI defaults to
Columnas root - Gap is mapped to Tailwind gap utilities
Try It
Copy the JSONL above and paste it in the Playground Paste tab.