Suggestion Card

InstallCopy Anchor Link

pnpm exec vegastack-design verify suggestion-card

pnpm dlx shadcn@4.21.0 add @vegastack/suggestion-card

UsageCopy Anchor Link

import { SuggestionCard } from "@/components/ui/suggestion-card";

<SuggestionCard
  privateLabel="Only you can see this"
  avatar={<PersonAvatar person={agent} size="sm" />}
  title="Assistant · 3 decisions from this chat"
  items={items}
  onItemCheckedChange={toggle}
  actions={
    <>
      <Button size="sm" variant="secondary" onClick={accept}>
        Create 2 tasks
      </Button>
      <Button size="sm" variant="ghost" onClick={dismiss}>
        Dismiss
      </Button>
    </>
  }
  footnote="Expires tomorrow"
/>;

The card has no action or wording of its own: the host passes the buttons and every line. For an agent that must wait for a decision before it acts, use ApprovalCard. A suggestion is an offer, and ignoring it is fine.

ExamplesCopy Anchor Link

AcceptingCopy Anchor Link

state="busy" holds the items still while the host works. The spinner goes on the host's main button, and the host turns off its other buttons, so Dismiss can't race the accept.

OutcomesCopy Anchor Link

accepted replaces the card with outcome, a plain line, with actions after it for Undo. Use it too for something an agent did by itself. expired folds to the title, outcome and actions. failed keeps the whole card, so Retry has its items. A dismissed card is simply not rendered.

In a listCopy Anchor Link

variant="row" is the compact form for a list: the title and buttons side by side, stacked in a container under 32rem. privateLabel, items and the footnote don't show.

API ReferenceCopy Anchor Link

AccessibilityCopy Anchor Link

• An open card is a region named by its title. A row is a group, and an accepted line is neither, so a long list or history doesn't flood the landmarks.
• Each item's label names its checkbox. A long label is cut on screen, not for a screen reader, and shows in full on hover.
• A card that appears announces nothing. Announce a failure or an acceptance through the conversation's own useAnnouncer region, and after accepted move focus to the card with ref, since the button that had it is gone.

Do / Don'tCopy Anchor Link