- Activity Heatmap
- Activity Rings
- Bar Chart
- Bar List
- Command Palette
- Composed Chart
- Corner Frame
- Data Table
- Delta Badge
- Distribution Bar
- Donut Chart
- Dot Plot
- Funnel Chart
- Heatmap Chart
- KPI Card
- Metric List
- Metric Value
- Period Tabs
- Radar Chart
- Radial Gauge
- Sankey Chart
- Scatter Chart
- Segmented Meter
- Sparkline
- Tick Bar
- Timeline
- Trend Chart
- Activity Rings Card
- Allocation Card
- Balance Chart Card
- Breakdown Card
- Commerce KPI Row
- Contributions Card
- Data Table Card
- Distribution Card
- Dot Plot Card
- Dual Metric Card
- Funnel Chart Card
- Goal Chart Card
- Heatmap Chart Card
- Insight Card
- KPI Row Card
- Metric Tabs Chart Card
- Payment Summary Card
- Period Bar Chart Card
- Progress Card
- Revenue Ring Card
- Ring KPI Card
- Score Gauge Card
- Stage Bars Card
- Status Gauge Card
- Tick KPI Card
A hero card with a badge, a very large number, a headline, and a paged set of insights over a soft gradient.
Authorization rate increased by 4% compared to last week.
This improvement reduced failed transactions by 950 and is projected to recover $12,400.
import { InsightCard } from "@/registry/dashboardcn/blocks/insight-card"
export default function InsightCardDemo() {A hero card with a badge, a very large number, a headline, and a paged set of insights over a soft gradient. Use it to surface generated or curated findings at the top of a dashboard.
Installation#
pnpm dlx shadcn@latest add @dashboardcn/insight-cardAlso installs card, tooltip from shadcn/ui if missing.
Usage#
import { InsightCard } from "@/components/insight-card"
<InsightCard
badge="Insights"
variant="aurora"
interval={6000}
items={[
{
value: 0.75,
format: "percent",
headline: "Authorization rate increased by 4% compared to last week.",
description: "This improvement reduced failed transactions by 950 and is projected to recover $12,400.",
},
{
value: 38,
headline: "38 high-value customers have not ordered in 60 days.",
},
]}
/>Examples#
Variants#
variant picks the gradient: aurora, sunset, ocean, or graphite. size="md" shrinks the number for narrower columns.
Signups from social doubled this week.
Most came from a single launch thread on Thursday.
Cost per lead is projected to fall 9% next month.
Driven by improving quality scores on the top three campaigns.
Checkout latency spiked at 02:14 UTC.
Traced to a cold cache after the nightly deploy. Now recovered.
import { Flame, Sparkles, Waves } from "lucide-react"
import { InsightCard } from "@/registry/dashboardcn/blocks/insight-card"Plain#
variant="plain" drops the gradient and uses the card colors, so it sits next to other blocks.
Authorization rate increased by 4% compared to last week.
This improvement reduced failed transactions by 950 and is projected to recover $12,400.
import { EllipsisVertical } from "lucide-react"
import { Button } from "@/components/ui/button"