# Stats

> A compact stats card for weekly installs: a large total, a hairline recharts line over eight weeks with only the latest point in the accent, and a change caption. Labels use Geist Mono; recharts is pinned to 3.8.0.

A shadcn/ui block from the [@01orbital](https://01orbital.dev/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/01orbital/app-stats).

- Page, with a live preview: https://shadcn.exchange/r/01orbital/app-stats
- Screenshot: https://shadcn.exchange/shot/01orbital/app-stats/light.png
- Registry item: https://01orbital.dev/r/app-stats.json
- Categories: app
- Listed: 2026-11-01, source last changed 2026-11-01

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/01orbital/app-stats.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `recharts`
- Registry items: `card`, `@01orbital/chart`, `@01orbital/font-geist-mono`, `@01orbital/separator`

## Files

### `blocks/app/stats/index.tsx`

```tsx
"use client"

import { Line, LineChart } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { ChartContainer, type ChartConfig } from "@/components/ui/chart"
import { Separator } from "@/components/ui/separator"

// The copy: change text here, not in the markup.
const COPY = {
  title: "Installs",
  body: "Components added to projects, week by week.",
  unit: "this month",
  window: "Last 8 weeks",
  change: "+20.1% on last month",
} as const

const VALUE = 48120

const data = [
  { installs: 10400 },
  { installs: 14405 },
  { installs: 9400 },
  { installs: 8200 },
  { installs: 7000 },
  { installs: 9600 },
  { installs: 11244 },
  { installs: 26475 },
]

const chartConfig = {
  installs: { label: "Installs" },
} satisfies ChartConfig

const LABEL =
  "font-mono text-xs tracking-widest text-muted-foreground uppercase"

// The line is a hairline; only the latest week takes the accent.
function LatestDot(props: { cx?: number; cy?: number; index?: number }) {
  if (props.index !== data.length - 1) return null
  return <circle cx={props.cx} cy={props.cy} r={3} fill="var(--art-accent)" />
}

export default function AppStats() {
  return (
    <Card className="mx-auto w-full max-w-sm gap-8">
      <CardHeader>
        <CardTitle>{COPY.title}</CardTitle>
        <CardDescription>{COPY.body}</CardDescription>
      </CardHeader>
      <CardContent className="flex flex-col gap-8">
        <span className="flex items-baseline gap-2">
          <span className="text-3xl font-medium tabular-nums">
            {VALUE.toLocaleString("en-US")}
          </span>
          <span className={LABEL}>{COPY.unit}</span>
        </span>
        <figure className="flex flex-col gap-3">
          <ChartContainer config={chartConfig} className="h-28 w-full">
            <LineChart
              data={data}
              margin={{ top: 6, right: 6, left: 6, bottom: 6 }}
            >
              <Line
                type="monotone"
                dataKey="installs"
                stroke="var(--muted-foreground)"
                strokeWidth={1.5}
                dot={<LatestDot />}
                activeDot={false}
                isAnimationActive={false}
              />
            </LineChart>
          </ChartContainer>
          <Separator />
          <figcaption className="flex items-baseline justify-between">
            <span className={LABEL}>{COPY.window}</span>
            <span className="text-sm/7 tabular-nums">{COPY.change}</span>
          </figcaption>
        </figure>
      </CardContent>
    </Card>
  )
}
```