Component Catalog
List
Scrollable container supporting vertical or horizontal direction.
A2UI → Nuxt UI Mapping
| A2UI Property | CSS Result |
|---|---|
children | Child components in scrollable container |
direction | flex-col (vertical) or flex-row (horizontal) |
gap | Tailwind gap class |
Example JSONL
{"version":"v0.10","createSurface":{"surfaceId":"list_demo","catalogId":"standard"}}
{"version":"v0.10","updateComponents":{"surfaceId":"list_demo","components":[
{"id":"root","component":"List","children":["card1","card2","card3"],"direction":"horizontal"},
{"id":"card1","component":"Card","child":"t1","title":"Item 1"},
{"id":"t1","component":"Text","text":"First item content"},
{"id":"card2","component":"Card","child":"t2","title":"Item 2"},
{"id":"t2","component":"Text","text":"Second item content"},
{"id":"card3","component":"Card","child":"t3","title":"Item 3"},
{"id":"t3","component":"Text","text":"Third item content"}
]}}
Properties
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
children | string | ✅ | — | Array of child component IDs |
direction | enum | — | "vertical" | "vertical" or "horizontal" |
gap | number | — | 2 | Gap between items |
Rendering Details
- Adds
overflow-autofor scrolling when content exceeds container - Horizontal lists use
flex-rowwith no wrapping - Vertical lists use
flex-col - Differs from Row/Column by having built-in scroll behavior
Try It
Copy the JSONL above and paste it in the Playground Paste tab.