Component Catalog
Text
Display text content with semantic heading and body variants.
A2UI → Nuxt UI Mapping
| A2UI Property | Nuxt UI Result |
|---|---|
variant: "h1" – "h5" | <h1> – <h5> elements |
variant: "body" | <p> element (default) |
variant: "caption" | <p class="text-sm text-muted"> |
text | Text content |
Example JSONL
{"version":"v0.10","createSurface":{"surfaceId":"text_demo","catalogId":"standard"}}
{"version":"v0.10","updateComponents":{"surfaceId":"text_demo","components":[
{"id":"root","component":"Column","children":["h1","h2","body","caption"]},
{"id":"h1","component":"Text","text":"Main Heading","variant":"h1"},
{"id":"h2","component":"Text","text":"Sub Heading","variant":"h2"},
{"id":"body","component":"Text","text":"This is body text — the default variant."},
{"id":"caption","component":"Text","text":"This is a caption with muted styling.","variant":"caption"}
]}}
Properties
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
text | string | ✅ | — | Text content to display |
variant | enum | — | "body" | "h1", "h2", "h3", "h4", "h5", "body", "caption" |
Try It
Copy the JSONL above and paste it in the Playground Paste tab.