Component Catalog
Slideover
A panel that slides in from the edge of the screen. Ideal for detail views, forms, and secondary content.
Slideover
A panel that slides in from any edge of the screen — maps to Nuxt UI's USlideover.
Use Slideover when you want to show detail content without navigating away from the current view. It's perfect for establishment profiles, booking details, settings panels, and forms.
A2UI → Nuxt UI Mapping
| A2UI Property | Nuxt UI Prop | Notes |
|---|---|---|
trigger | default slot | Component ID that opens the panel |
content | #body slot | Component ID rendered inside |
title | title | Optional header title |
description | description | Optional header subtitle |
side | side | left, right (default), top, bottom |
Example JSONL
{"version":"v0.10","createSurface":{"surfaceId":"slideover_demo","catalogId":"standard"}}
{"version":"v0.10","updateComponents":{"surfaceId":"slideover_demo","components":[
{"id":"root","component":"Slideover","trigger":"open_btn","content":"panel_body","title":"Details","side":"right"},
{"id":"open_btn","component":"Button","label":"Open Panel","variant":"outline"},
{"id":"panel_body","component":"Column","children":["info_heading","info_text"]},
{"id":"info_heading","component":"Text","text":"Panel Content","variant":"heading","level":3},
{"id":"info_text","component":"Text","text":"This content slides in from the right. The trigger button opens it, and the close button in the header dismisses it."}
]}}
Properties
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
trigger | ComponentId | Yes | — | Component that opens the panel when clicked |
content | ComponentId | Yes | — | Component rendered inside the panel body |
title | string | No | — | Header title text |
description | string | No | — | Header subtitle text |
side | left | right | top | bottom | No | right | Direction the panel slides from |
Try It
Paste the JSONL above into the Playground to see it render.