# Insight cards

A React component in [Beamline](https://beamline.io/)'s [Dashboard](https://beamline.io/components/dashboard) category. Live demo: https://beamline.io/components/insight-cards

Findings from an agent, one per page: the sentence, the series it is about with their change, a chart to scrub that names each point, and a follow-up question.

## Use it for

- Agent-generated findings with a supporting chart and a next question.

## Not for

- Plain KPIs ([metric-card](https://beamline.io/components/metric-card)).

## Anatomy

- header (count, previous, next)
- summary
- series legend with change
- chart (lanes, scrub guide)
- question button

## States

- page
- scrubbing

## Keyboard

- ← → on the chart read points
- arrows buttons page

## Motion

Pages slide 16 px and fade.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `pages` | `{ id, summary, series: { label, change, amount?, points, color? }[], labels?, format?, question? }[]` | — |  |
| `index / defaultIndex / onIndexChange` | `number` | — |  |
| `onAsk` | `(question, page) => void` | — |  |
| `classNames` | `InsightCardsClassNames` | — |  |
| `style / ref` | `CSSProperties / Ref<HTMLElement>` | — | Visual root styles and native root ref. |

## Dependencies

`lucide-react`, `motion`

## Import

```tsx
import { InsightCards } from "@/components/insight-cards/insight-cards";
```

## Get it

Insight cards is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. [Get Beamline](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect)

## More in Dashboard

- [App shell](https://beamline.io/components/app-shell): The frame for every app screen: collapsible sidebar with grouped navigation, top bar and page.
- [Bar list](https://beamline.io/components/bar-list): Ranked horizontal bars with label inside and value at the end — top pages, sources, customers.
- [Category bar](https://beamline.io/components/category-bar): One bar split into labelled ranges with an optional marker that names its range.
- [Metric card](https://beamline.io/components/metric-card): A KPI: label, a value that rolls to each new number, the change with arrow, sign and tone, a trend line and context; unmeasured values are hatched, never…
- [Tracker](https://beamline.io/components/tracker): A row of status blocks for uptime, job runs or daily checks, with tooltips and a legend.