dashboardcn

Search documentation

Search for a page or component.

Contributions Card

PreviousNext

A contribution-graph card: a headline total with delta, a row of stat tiles, a period switcher, and a year of daily activity.

Contributions this year
977+14.8%
vs last year
9B
Lifetime tokens
562.7M
Peak tokens
12h 54m
Longest task
62days
Top streak
Activity
Sep
Oct
Nov
Dec
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
import { ContributionsCard } from "@/registry/dashboardcn/blocks/contributions-card"

// Deterministic sample data so the demo is stable between renders.

Installation

pnpm dlx shadcn@latest add @dashboardcn/contributions-card

Also installs card, tabs, tooltip from shadcn/ui if missing.

Usage

import { ContributionsCard } from "@/components/contributions-card"

<ContributionsCard
  title="Contributions this year"
  delta={0.148}
  deltaLabel="vs last year"
  stats={[
    { label: "Lifetime tokens", value: 9000000000, format: "compact" },
    { label: "Longest task", value: "12h 54m" },
    { label: "Top streak", value: 62, unit: "days" },
  ]}
  periods={[
    { value: "month", label: "Monthly" },
    { value: "year", label: "Yearly" },
  ]}
  data={[
    { date: "2026-09-01", value: 12 },
    { date: "2026-09-02", value: 3 },
  ]}
  unit="commits"
/>