Charts

Data-display primitives for dashboards and KPI surfaces.

Revenue

$48,210

+12.4%

Active members

1,284

+3.1%

Volunteer hours

9,432

0.0%

Churn

2.1%

−0.6%

Installation

$Terminal

npx shadcn@latest add https://sdk-components.thesqd.com/r/stat.json https://sdk-components.thesqd.com/r/chart.json

No-build / CDN drop-in

For projects without a bundler (Babel-standalone via CDN, plain HTML, etc.), a self-contained example with `Stat` + Recharts loaded via UMD is published at the URL below. View source to copy the primitives — no CVA, no lucide, inline SVGs + plain class strings.

https://sdk-components.thesqd.com/cdn/charts-cdn.html

Usage

Compose the Stat slots in any order — drop any subset.

TSImport

import { Stat } from "@/components/ui/stat";

TSExample

import { Stat } from "@/components/ui/stat";

export function Example() {
  return (
    <Stat
      className="max-w-sm"
      label="Revenue"
      value="$48,210"
      delta={{ direction: "up", value: "+12.4%" }}
    />
  );
}

Composition

Anatomy of the Stat primitive.

Stat
├── StatHeader (optional — flex row for label + badge)
│   ├── StatLabel
│   └── StatBadge
├── StatValue
├── StatDelta (direction: "up" | "down" | "flat")
└── StatDescription

Stat grid

Four Stat cards in a responsive grid. Each shows a label, the headline value, and a tonal delta pill (up / down / flat).

Revenue

$48,210

+12.4%

Active members

1,284

+3.1%

Volunteer hours

9,432

0.0%

Churn

2.1%

−0.6%

Stat grid — with icon action

Same KPI grid, with an icon-only `ArrowUpRight` link button in each `StatHeader`. Animation is wired to the BUTTON's `onMouseEnter`/`onFocus` (via a ref to the icon handle) — hovering anywhere on the button plays the motion, not just the icon glyph. Each link opens in a new tab.

Revenue

$48,210

+12.4%

Active members

1,284

+3.1%

Volunteer hours

9,432

0.0%

Churn

2.1%

−0.6%

Detailed stat

Single Stat with a header badge, delta, and description line. Use when one KPI deserves the spotlight on a dashboard.

Recurring giving

Last 30 days

$24,310

+8.2%

vs. previous 30 days

Concepts to review

Oldest: 2h ago

Area chart — with animated action

Recharts area chart wrapped in `ChartContainer`, painted in Squad violet (`#513DE5`). Header gets a `CardAction` link button with the animated `ArrowUpRightIcon` (hover the button to play it). Opens in a new tab via `target="_blank" rel="noopener noreferrer"`.

Area Chart

Showing total visitors for the last 6 months

Open report

Trending up by 5.2% this month

January - June 2024

Bar chart — with static action

Same Card-with-action pattern, but using the static `ArrowUpRight` lucide glyph instead of the animated icon. Pass `animated={false}` to opt out of motion when you want a quieter header.

Bar Chart

January - June 2024

View breakdown

Trending up by 5.2% this month

Showing total visitors for the last 6 months

API Reference

Props exposed by the Stat primitive and StatDelta.

Stat

Prop	Type	Default	Description
`variant`	"default" \| "ghost"	"default"	`ghost` strips the border + background so the Stat blends into a parent surface.
`highlight`	boolean	—	Paints the StatValue in coral to flag attention-worthy metrics (e.g. churn).
`label`	ReactNode	—	Top label. When set (with no `children`), Stat auto-renders `<StatHeader><StatLabel/>…</StatHeader>`.
`value`	ReactNode	—	Headline value. Flat-prop mode auto-renders `<StatValue>`.
`delta`	{ direction: "up" \| "down" \| "flat"; value: ReactNode }	—	Auto-renders `<StatDelta>` after the value.
`description`	ReactNode	—	Muted description rendered after value/delta.
`badge`	ReactNode	—	Small pill rendered in the header next to the label (auto-renders `<StatBadge>`).
`action`	AnimatedArrowLinkProps \| ReactNode	—	Right-aligned header action. Pass `{ href, label?, animated?, ariaLabel?, target? }` to auto-render an `<AnimatedArrowLink>`; pass any other ReactNode to drop in a custom control.
`className`	string	—	Override or extend the resolved Stat classes.

StatDelta

Prop	Type	Default	Description
`direction`	"up" \| "down" \| "flat"	"flat"	Drives the icon and tone of the delta pill (emerald / red / muted).
`value`	ReactNode	—	Already-formatted delta text (e.g. `+12.4%`). Use a NumberFormat upstream.

AnimatedArrowLink

Prop	Type	Default	Description
`href`	string	—	Destination URL.
`label`	string	—	Visible link text. Omit (or pass empty string) to render an icon-only button — `ariaLabel` becomes required.
`animated`	boolean	true	Use the animated `ArrowUpRightIcon`. Pass `false` for the static lucide `ArrowUpRight` glyph.
`target`	"_blank" \| "_self" \| "_parent" \| "_top"	"_blank"	`_blank` adds `rel="noopener noreferrer"` automatically. Pass `_self` to navigate in place.
`ariaLabel`	string	—	Required when `label` is omitted.
`iconSize`	number	16 with label, 18 icon-only	Override the px size of the arrow glyph.
`className`	string	—	Override or extend resolved Button classes.