Sparkline Set

Responsive grid of metric cards, each with a label, value, delta chip and a small area chart sparkline. Good for a KPI overview at the top of a React dashboard.

src/registry/ui/sparkline-set.tsx/r/sparkline-set.json

Installation#

bash

npx shadcn@latest add @minidev/sparkline-set

MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/sparkline-set.json

Usage#

tsx

import { SparklineSet } from "@/components/ui/sparkline-set"

export function Example() {
  return (
    <SparklineSet items={[
      { label: "Revenue", value: "$48.2k", delta: 12.4, data: [12,18,15,28,22,36,30,42] },
      { label: "Signups", value: "1,204", delta: 4.1, data: [8,10,9,14,13,18,16,20] },
      { label: "Churn", value: "2.1%", delta: -0.4, data: [6,5,7,4,5,3,4,3] },
    ]} />
  )
}

API reference#

SparklineSet props
Prop	Type	Default
`items`	`SparklineItem[]`	`SAMPLE_ITEMS`
`className`	`string`	`-`

Dependencies#

npm

React only

Built from

Area Chart Metric Delta

Examples#

ChartsArea, bar, line, radar

Account Setup ProgressReact onboarding card that shows account setup as completed steps out of a total, with a labelled progress bar and a hint for the next step to finish.Activity FeedReact activity feed that lists who did what and when, with initials avatars, muted action text and tabular timestamps in a single bordered card.Admin Stat StripResponsive Tailwind row of admin KPI tiles, each with a label, a large tabular value and an optional up or down delta. Collapses from four columns to one.Calendar AgendaReact agenda list of the day's events with a fixed time column, title and optional meta line such as location or attendees, divided inside one card.Goal RingA circular progress ring that shows how far along a goal is, with the percentage in the middle and a caption below. Handy for fitness, sales or weekly targets.Impersonation BannerA top of page bar telling support staff which user account they are viewing as, with an Exit button to end the session. Common in admin and support tools.

All dashboard components

Learn more

Charts in React with Tailwind and no charting libraryGuide Best React chart libraries, and when you do not need oneGuide