Stat Sheet

Install

Or by hand, in a Next.js project with shadcn set up. It writes components/pastetaste/stat-sheet.tsx.

Install the pastetaste component "Stat Sheet" (stat-sheet) into this Next.js project and use it.

What it is: A grid of stat tiles that morph on a single spring into a detail sheet with a big number and a chart, while the rest of the screen dims and blurs. Esc, tap or drag folds it back.

Before you place it, ask me (one short message, in my language; "skip" = sensible default): which page and section it goes in, my brand colour (hex), the text, labels or images it should show, and whether I want my logo or my own copy in the demo content. Then:

Steps:
1. If the project has no components.json, run: npx shadcn@latest init -y -d. Then run: npx shadcn@latest add https://pastetaste.com/r/stat-sheet.json
   (it writes components/pastetaste/stat-sheet.tsx; install any npm packages it reports: motion@^12.23.0).
2. Import it: import { StatSheet } from "@/components/pastetaste/stat-sheet" (check the file for the exact named export).
3. Put it where it fits on the page I name, keep the rest of the page untouched, and pass props for my colours instead of editing the installed file.
4. It does not depend on Tailwind; colours come from CSS variables (--pt-*) or props.
5. It supports prefers-reduced-motion with a still state; do not remove it.

Props (all optional unless the type has no default):
- items: StatSheetItem[] = 3-tile sample — Tiles: id, label, value, optional unit, format, delta, period, caption, detail, chartTitle, chartSub, series, seriesLabels and chart ('bars' | 'area').
- columns: number = 3 — Tiles per row.
- header: ReactNode — Content above the tiles; it dims and becomes inert with them while a sheet is open.
- footer: ReactNode — Content below the tiles; dims with them.
- padding: number = 16 — Inner padding in px.
- gap: number = 10 — Space between tiles in px.
- open: string | null — Id of the open tile for controlled use; null means closed.
- onOpenChange: (id: string | null) => void — Called with the tile id when a sheet opens and with null when it closes.
- accent: string = var(--pt-accent, #ff4b2b) — Accent used by the highlighted bar, the line chart and the up arrows.
- tone: 'light' | 'dark' = 'dark' — Ink and surface colours; --pt-ground, --pt-card, --pt-sheet, --pt-ink, --pt-muted, --pt-line and --pt-bar override them.
- label: string = 'Statistics' — Accessible name of the tile group.
- closeLabel: string = 'Close' — Accessible name of the close button.
- className: string — Extra classes on the root.
- style: CSSProperties — Inline style overrides on the root; set --pt-radius for the corner radius.

Live preview: https://pastetaste.com/c/stat-sheet
Then run the dev server, check it in the browser at desktop and mobile width, and tell me the page URL.

Props 14