Insight Digest Card React component
A short digest written by an AI agent: one sentence to remember, findings ranked by impact, the evidence behind each, and a way to turn it into a task.
About the Insight Digest Card component
Insight Digest Card turns what an AI agent found into something a busy person can act on. It opens with one sentence worth remembering, then lists the findings with what each one is worth.
Pick a finding to see why it matters and the evidence behind it. From there it can become a task or be dismissed, so the digest works as a short to-do list.
When to use it
Use it for weekly reports, morning briefings and analytics summaries written by an agent.
Keep it to the few findings that matter. A digest that lists everything isn't a digest.
Installation
Add the Insight Digest Card component to your project with the shadcn CLI. It lands in components/insight-digest-card.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/insight-digest-cardProps
<InsightDigestCard /> accepts 7 props, all optional. It also accepts the usual <section> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| title | string | "This week's digest" |
| byline Who wrote it and from what. | string | "Written by Scout from 6 sources, Monday 08:00" |
| headline The one sentence to remember. | string | "Search is working, but older iPhones are costing you more than it brings in." |
| insights | DigestInsight[] | DEFAULT_INSIGHTS |
| onCreateTask | (insight: DigestInsight) => void | — |
| onDismiss | (insight: DigestInsight) => void | — |
- theme"dark" | "light"Default: "dark"
- titlestringDefault: "This week's digest"
- byline
Who wrote it and from what.
stringDefault: "Written by Scout from 6 sources, Monday 08:00" - headline
The one sentence to remember.
stringDefault: "Search is working, but older iPhones are costing you more than it brings in." - insightsDigestInsight[]Default: DEFAULT_INSIGHTS
- onCreateTask(insight: DigestInsight) => void
- onDismiss(insight: DigestInsight) => void
Insight Digest Card FAQ
- What are the kinds for?
- win, risk and watch set the dot and chart colour, so the list can be scanned at a glance.
- Does it create the task?
- No. onCreateTask gives you the finding, and your app creates the task.
- Can a choice be undone?
- Yes. Every finding has Undo after you act on it.
- Does it change height?
- No. Every finding shares one grid cell.
