Insight Cards

Insight Cards shows several findings in the space of one. Each card states a finding as a sentence and then shows the evidence for it: a chart, a figure, a short explanation. Two buttons move between the cards.

It never advances by itself. The Beautiful UI original rotated on a timer, which moves content a person may be reading.

Insight Cards draws no charts itself. Put an Honest UI chart in each card, as the preview above does with a bar, a pie, and a line chart.

Installing insight-cards brings Button along as a registry dependency.

Moving between cards

One card is shown at a time. Previous and Next are inactive at the ends. With a single card, the position and the buttons are left out.

Height

Cards can differ in height, and the content below moves when they do. Giving every chart the same height, as the preview does, keeps the cards close to one size.

The component is a section named by its heading. The position, such as "2 of 3", is a polite live region, so moving to another card announces it. Previous and Next have names, and at either end they are marked inactive without losing focus.

Each card is an article. State the finding in title, and give the plotted values as text under the chart. A chart is a canvas: its tooltip needs a pointer, and its values are not exposed to screen readers.

import { BarChart, type ChartConfig } from "honestui/charts"
import "honestui/charts.css"

import { InsightCard, InsightCards } from "@/components/ai/insight-cards"

const config = {
  failed: { label: "Failed runs", colors: { light: ["#be123c"], dark: ["#fb7185"] } },
} satisfies ChartConfig

<InsightCards title="Insights">
  <InsightCard title={insight.finding}>
    <div className="h-44 w-full">
      <BarChart data={insight.rows} config={config} className="h-full w-full">
        <BarChart.Grid />
        <BarChart.XAxis dataKey="week" />
        <BarChart.Tooltip />
        <BarChart.Bar dataKey="failed" />
      </BarChart>
    </div>
    <p>{insight.summary}</p>
  </InsightCard>
</InsightCards>

Give the chart a container with a height, or it has no room to draw. Charts come from the honestui package; see chart installation.

A single insight

With one card, there is nothing to move between.

InsightCards

Accepts native section props beyond those listed. Its children are the cards.

InsightCard

Accepts native article props beyond those listed. Its children are the evidence.