Stay Card
A gallery-based hotel result card for travel and conversational interfaces.
In an agent response
A reasoning and tool workflow that resolves into Stay Cards.
Playback started.
Default Stay Card
A carousel-based hotel result with stay details, pricing, and rating.
2 beds560 sq ft
Harbour Light House
The Rocks, Sydney
$286/ night
4.92 out of 5 stars, 184 reviews
Mosaic Stay Card
A compact hotel result with a three-image mosaic, address, rating, and short description.
Harbour Light House
4.92 out of 5 stars
80 Cumberland Street, The Rocks
A quiet harbour-side stay with warm interiors, thoughtful details, and Circular Quay within walking distance.
Stay Card is a rich result card for AI agent responses: when a travel assistant or booking chatbot returns accommodation options, each one renders as a gallery card with stay details, pricing, and rating instead of plain text. Built with React, shadcn/ui, and Tailwind CSS, it installs from the registry and pairs with the compact Mosaic variant for denser result lists.
API reference
Stay Card
| Prop | Type | Default | Description |
|---|---|---|---|
images | readonly StayCardImage[] | — | Provides the ordered gallery images. Each item requires src and alt. |
href | string | — | Sets the destination for the image and title links. |
title | string | — | Displays the stay name. |
location | string | — | Displays the stay location. |
beds | number | — | Displays the bed count with an icon when provided. |
squareFeet | number | — | Displays the formatted area in square feet with an icon when provided. |
price | string | — | Displays an already-formatted price. |
priceSuffix | string | "/ night" | Adds context after the price. |
rating | number | — | Displays the rating when provided. |
reviewCount | number | — | Displays the review count when provided. |
StayCard also accepts standard article props except children.
Mosaic Stay Card
MosaicStayCard presents the same kind of hotel result in a compact,
editorial layout with a static three-image mosaic and a short description.
| Prop | Type | Default | Description |
|---|---|---|---|
images | readonly MosaicStayCardImage[] | — | Provides up to three mosaic images. Each item requires src and alt. |
href | string | — | Sets the destination for the image and title links. |
title | string | — | Displays the stay name. |
address | string | — | Displays the compact address below the title. |
description | string | — | Displays a two-line summary below the separator. |
rating | number | — | Displays the star rating when provided. |
MosaicStayCard also accepts standard shadcn Card props except children
and size.
Behavior
Gallery
Images use a 12:11 frame and remain in their supplied order. Multi-image galleries use the shadcn Carousel with previous and next buttons inside the image frame. The buttons appear when the gallery is hovered or focused. A single image hides those controls. An empty gallery or an image that fails to load shows a placeholder instead of leaving an empty region.
Mosaic layout
The first image occupies the large left tile and the next two images fill the right column. Additional images are ignored. Missing or failed images show a labeled placeholder, while long titles, addresses, and descriptions are constrained by the card layout.
Agent tool results
The default Usage example maps a hotel search tool result array directly to
StayCard. The Mosaic Usage example renders a richer editorial result with an
address and short description. Keep the tool result responsible for formatted
display values; the components are responsible only for presentation and local
interaction.
The preview uses an in-page placeholder link. Replace every href with the
canonical stay-detail destination when connecting real tool results.
The conversation above uses the documentation-only Agent Flow runtime to play
a deterministic get_location and search_stays workflow. The location lookup
and stay search appear in a collapsible execution timeline. search_stays
returns one structured result containing three stays; after the assistant
response finishes, the frontend renders all three as Stay Cards. The scenario
runtime and Agent Flow UI are intentionally excluded from the Stay Card
Registry package.
Credits
The stay information and hotel names in these examples are fictional. They do not describe or imply endorsement by a real property, location, or photographer.
Demo photography is loaded remotely from Pexels and is not included in the Registry package:
- Modern hotel room with a city view by Pexels User.
- Luxury resort pool by Margo Evardson.
- Boutique hotel exterior by celal keser.
The photographs are used under the Pexels License.