Recipes

Establishment Detail

A slideover panel revealing venue information — demonstrates the Slideover component with nested layout composition.

Establishment Detail

A panel that slides in from the right when a customer taps an establishment card — showing the venue's full profile, services, and a booking call-to-action.

This recipe introduces the Slideover component — a new A2UI type that maps to Nuxt UI's USlideover. It's ideal for detail panels that shouldn't navigate away from the current view.

A2UI → Nuxt UI Mapping

A2UI Property	Nuxt UI Prop	Notes
`trigger`	default slot	Component ID that opens the slideover
`content`	`#body` slot	Component ID rendered inside the panel
`title`	`title`	Header title
`description`	`description`	Header subtitle
`side`	`side`	`left`, `right` (default), `top`, `bottom`

What the AI Generates

{"version":"v0.10","createSurface":{"surfaceId":"venue_detail","catalogId":"standard"}}
{"version":"v0.10","updateComponents":{"surfaceId":"venue_detail","components":[
  {"id":"root","component":"Slideover","trigger":"venue_card","content":"detail_body","title":"Drammen Wellness Studio","description":"Laugavegur 42, 101 Reykjavík","side":"right"},
  {"id":"venue_card","component":"Card","title":"Drammen Wellness Studio","child":"card_body"},
  {"id":"card_body","component":"Column","children":["venue_img","venue_tagline","venue_cta"]},
  {"id":"venue_img","component":"Image","url":"https://images.unsplash.com/photo-1540555700478-4be289fbec6b?w=600&h=300&fit=crop","alt":"Wellness studio interior"},
  {"id":"venue_tagline","component":"Text","text":"Premium wellness & massage in downtown Reykjavík","variant":"muted"},
  {"id":"venue_cta","component":"Button","label":"View Details","variant":"outline","icon":"i-lucide-arrow-right"},
  {"id":"detail_body","component":"Column","children":["detail_img","about_heading","about_text","services_heading","services_list","hours_heading","hours_col","book_btn"]},
  {"id":"detail_img","component":"Image","url":"https://images.unsplash.com/photo-1540555700478-4be289fbec6b?w=800&h=400&fit=crop","alt":"Studio interior"},
  {"id":"about_heading","component":"Text","text":"About","variant":"heading","level":3},
  {"id":"about_text","component":"Text","text":"Family-owned wellness studio offering therapeutic massage, hot stone treatments, and aromatherapy since 2018. All therapists are certified and trained in both Eastern and Western techniques."},
  {"id":"services_heading","component":"Text","text":"Services","variant":"heading","level":3},
  {"id":"services_list","component":"Column","children":["svc_1","svc_2","svc_3"]},
  {"id":"svc_1","component":"Row","children":["svc_1_name","svc_1_price"]},
  {"id":"svc_1_name","component":"Text","text":"Deep Tissue Massage — 60 min"},
  {"id":"svc_1_price","component":"Text","text":"12.900 ISK","variant":"muted"},
  {"id":"svc_2","component":"Row","children":["svc_2_name","svc_2_price"]},
  {"id":"svc_2_name","component":"Text","text":"Hot Stone Therapy — 90 min"},
  {"id":"svc_2_price","component":"Text","text":"18.500 ISK","variant":"muted"},
  {"id":"svc_3","component":"Row","children":["svc_3_name","svc_3_price"]},
  {"id":"svc_3_name","component":"Text","text":"Aromatherapy Session — 45 min"},
  {"id":"svc_3_price","component":"Text","text":"9.900 ISK","variant":"muted"},
  {"id":"hours_heading","component":"Text","text":"Hours","variant":"heading","level":3},
  {"id":"hours_col","component":"Column","children":["hours_weekday","hours_weekend"]},
  {"id":"hours_weekday","component":"Row","children":["hours_weekday_label","hours_weekday_value"]},
  {"id":"hours_weekday_label","component":"Text","text":"Mon – Fri","variant":"muted"},
  {"id":"hours_weekday_value","component":"Text","text":"09:00 – 20:00"},
  {"id":"hours_weekend","component":"Row","children":["hours_weekend_label","hours_weekend_value"]},
  {"id":"hours_weekend_label","component":"Text","text":"Sat – Sun","variant":"muted"},
  {"id":"hours_weekend_value","component":"Text","text":"10:00 – 18:00"},
  {"id":"book_btn","component":"Button","label":"Book Now","variant":"primary","icon":"i-lucide-calendar-check"}
]}}

Component Properties

Property	Type	Required	Description
`trigger`	ComponentId	Yes	The component that opens the slideover when clicked
`content`	ComponentId	Yes	The component rendered inside the slideover panel
`title`	string	No	Text in the slideover header
`description`	string	No	Subtitle in the slideover header
`side`	`left` \| `right` \| `top` \| `bottom`	No	Direction the panel slides from (default: `right`)

Try It

Paste the JSONL above into the Playground to see the card and slideover in action.

Booking Receipt

A modal booking confirmation composed from standard A2UI catalog components — the kind of interface Agent generates after a customer completes a booking.

Booking History

A data table showing booking records with status, dates, and amounts — introduces the Table component for structured data.