Component Catalog

Tabs

Tabbed container with dynamic child content per tab.

A2UI → Nuxt UI Mapping

A2UI Property	Nuxt UI Result
`tabItems`	`UTabs` items array
`tabItems[].title`	Tab label
`tabItems[].child`	Content rendered when tab is selected

Example JSONL

{"version":"v0.10","createSurface":{"surfaceId":"tabs_demo","catalogId":"standard"}}
{"version":"v0.10","updateComponents":{"surfaceId":"tabs_demo","components":[
  {"id":"root","component":"Column","children":["tabs1"]},
  {"id":"tabs1","component":"Tabs","tabItems":[
    {"title":"Overview","child":"overview_content"},
    {"title":"Settings","child":"settings_content"},
    {"title":"About","child":"about_content"}
  ]},
  {"id":"overview_content","component":"Text","text":"Welcome to the overview tab."},
  {"id":"settings_content","component":"Column","children":["toggle","slider"]},
  {"id":"toggle","component":"CheckBox","label":"Enable notifications","value":true},
  {"id":"slider","component":"Slider","label":"Volume","value":50,"min":0,"max":100},
  {"id":"about_content","component":"Text","text":"Version 1.0.0 — Built with A2NUI."}
]}}

Properties

Property	Type	Required	Default	Description
`tabItems`	array	✅	—	Array of `{ title, child }` objects
`tabItems[].title`	string	✅	—	Tab label text
`tabItems[].child`	ComponentId	✅	—	ID of component to render for this tab

Rendering Details

Maps to Nuxt UI's UTabs component
Tab content renders dynamically using A2uiNode
Only the selected tab's content is rendered at a time
Tab items can reference any component type as their content

Try It

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

Card

Content container with optional title header.

Divider

Visual separator between sections.