SummaryCard
StableAn AI-written overview with its sources, a warning to double-check, and a way to give feedback.
Also known as ai summary, overview card, tldr
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
With citations and detail
Overview
Based on 2 sources
Sources
AI responses may include mistakes. Check important information.
<SummaryCard title="Overview" status="Based on 2 sources"
detail="Wind power grew faster than solar, and battery storage doubled."
sources={[
{ id: 1, title: "Annual energy review 2025", url: "https://example.com", domain: "energy.example.gov", snippet: "Renewables supplied 24 percent of generation." },
{ id: 2, title: "Grid storage outlook", url: "https://example.com", domain: "journal.example.edu" },
]}
onFeedback={() => {}}>
Renewables supplied about a quarter of national generation last year.
<CitationHoverCard n={1} title="Annual energy review 2025" domain="energy.example.gov" url="https://example.com" trust="Government" />
</SummaryCard>The numbers open source previews. Show more reveals the detail.
When to use it
Holds an AI-written overview together with what people need to judge it: an AI label, what it is based on, its sources, a note to double-check and a way to give feedback.
Made of: AI label · Title · Status line · Summary · Show more button · Extra detail · Sources · Note to double-check · Feedback
Use it for
- A summary of a long thread, document or set of search results.
- An overview at the top of results, with sources and citations.
- A summary still being written, with a status line and a spinner.
Not for
- The closing point of a single answer: use KeyTakeaway.
- A normal assistant reply in a chat: use Message.
- A list of sources on its own: use SourceList.
Do and avoid
Trip overview
Based on 2 sources
Sources
AI responses may include mistakes. Check important information.
Trip overview
AI responses may include mistakes. Check important information.
Do
- Say in the status line what the summary is based on.
- Put the note to double-check under the content, and make it specific for sensitive topics.
- Put citations in the text, so each fact can be checked.
- Keep the first view short. Put the depth behind Show more.
Avoid
- Do not make screen readers read the summary as it appears. Update the status line instead.
- Do not remove the AI label.
- Do not leave out sources when the summary states facts.
On a phone
- The card fills the width with 20px padding. The title row wraps, and the status moves to its own line if it does not fit.
- The Show more button, the feedback buttons and the reasons keep their size and have a 44px tap area on touch screens.
- Sources stack in one column below 640px wide. Citation markers inside the text follow the Citation hover card rules.
Seen in products
- Google AI Overviews is a generated answer block at the top of results with source links and a disclaimer.
- In May 2025 the Google disclaimer changed from Generative AI is experimental to AI responses may include mistakes, and was expanded for financial and legal topics.
- A Google UI refresh added hover link previews on citations.
- Slack AI gives thread summaries and channel recaps with sources cited in each summary.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Overview" | Heading and accessible name of the section. |
| aiLabel | string | none | Replaces the text of the AI label. |
| status | ReactNode | none | Status line in the header. It is a polite status region. |
| generating | boolean | none | Shows a spinner beside the status. |
| childrenrequired | ReactNode | none | The summary. |
| detail | ReactNode | none | Expandable detail. Omit to hide the control. |
| expandLabel / collapseLabel | string | "Show more" / "Show less" | Text of the expand control. |
| defaultExpanded / expanded / onExpandedChange | boolean / boolean / (v: boolean) => void | false | Uncontrolled or controlled expansion. |
| sources | Source[] | none | Source cards shown in a numbered list. |
| disclaimer | ReactNode | "AI responses may include mistakes. Check important information." | Disclaimer line. Pass null to remove it. |
| onFeedback | (rating, reason?) => void | none | Shows the feedback row when provided. |
| className | string | none | Extra classes on the section. |
"Show code under the preview gives the code for the example on the stage."
In Figma
In Figma, one SummaryCard switches all of this from its properties panel, across 2 variants. Each property sets the React prop beside it, so design and code use the same names.
| Figma property | React | Values |
|---|---|---|
| Generating | generating | On or off |
| Title | title | Any text |
| Status | status | Any text |
Tokens
Change one of these and every part that uses it follows.
--surface--border--lime--fg-muted--fg-subtle--radius-control--radius-card
Built in
- The card is a section named by its title, and the AI label is written in words.
- The status line is announced when it changes. The summary text is not.
- Show more is a button that tells screen readers whether the detail is open. The detail is hidden when closed.
- Sources are a named, numbered list of links.
What you need to do
- Report progress by changing the status line, not the summary. Do not make screen readers read the summary as it arrives.
- Put citation numbers inside the summary, so each fact can be checked by keyboard.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide