Component Catalog

Row

Horizontal flex container with gap, justify, and align options.

A2UI → Nuxt UI Mapping

A2UI Property	CSS Result
`children`	Child components rendered inline
`gap`	Tailwind gap class (`gap-1` to `gap-8`)
`justify`	`justify-content` (start, center, end, between)
`align`	`align-items` (start, center, end, stretch)

Example JSONL

{"version":"v0.10","createSurface":{"surfaceId":"row_demo","catalogId":"standard"}}
{"version":"v0.10","updateComponents":{"surfaceId":"row_demo","components":[
  {"id":"root","component":"Row","children":["btn1","btn2","btn3"]},
  {"id":"btn1","component":"Button","label":"Cancel","variant":"ghost"},
  {"id":"btn2","component":"Button","label":"Save Draft","variant":"outline"},
  {"id":"btn3","component":"Button","label":"Publish","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-row with flex-wrap
Gap is mapped to Tailwind gap utilities
Children are rendered recursively via A2uiNode

Try It

Copy the JSONL above and paste it in the Playground Paste tab.

AudioPlayer

Native HTML5 audio player with optional description.

Column

Vertical flex container with gap, justify, and align options.