Generative UI

Result Cards

A row or grid of result cards the agent returns inside a reply, one shape for products, places, people and documents.

Group: Generative UI. Exports: ResultCards. Halaska addition with no shadcn/ui equivalent.

Usage

import { ResultCards } from "./halaska-kit";

items { id: string, title: string, subtitle?: string, meta?: string, badge?: string, image?: string | ReactNode, href?: string, actionLabel?: string, onAction?: (item) => void }[] (default RESULT_ITEMS): Cards to show; without an image a neutral placeholder tile renders (default: RESULT_ITEMS)
layout "row" | "grid" (default "row"): row scrolls horizontally with snap points, grid wraps into `columns` (default: "row")
columns number (default 2): Columns in grid layout on wide containers; narrow containers collapse to one (default: 2)
intro string (default "Four support tools fit Northwind's stack. Helpdesk Pro is the closest match."): One line above the cards, written as the agent's sentence (default: "Four support tools fit Northwind's stack. Helpdesk Pro is the closest match.")
actionLabel string (default "Choose"): Label of each card's outline action unless the item sets its own (default: "Choose")
selectedLabel string (default "Chosen"): Action label on the selected card (default: "Chosen")
onSelect (item) => void: Fires when a card's title or action is activated; the card is also marked as selected

The cards are a list named Results, and each card is a list item.
Each title is a real button, or a link when the item has an href, so every card is reachable with Tab.
The action button is named with the item, for example Choose: Helpdesk Pro.
Image tiles are decorative unless the item supplies an image url, which then takes the title as alt text.

The horizontal row has no previous and next buttons: it relies on native scrolling and the keyboard moving focus between cards.
Selection is single and internal; there is no controlled selected prop.