Stats band

Headline numbers that count up in view, each with a tiny visual that proves it and a context line on hover, plain or in a hairline grid.

$npx shadcn@latest add @silicon-ui/stats-band

Installation

$npx shadcn@latest add @silicon-ui/stats-band

Install the dependencies.
$npm install motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/blocks/stats-band/stats-band.tsx
- components/silicon-ui/blocks/stats-band/stats-band-data.ts
- components/silicon-ui/blocks/stats-band/stats-band.module.css
- components/silicon-ui/blocks/stats-band/stats-band-world.ts
- components/silicon-ui/segmented-control/segmented-control.tsx shared
- components/silicon-ui/segmented-control/segmented-control.module.css shared
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Source codetsx

import { StatsBand } from "@/components/silicon-ui/blocks/stats-band/stats-band";

Prop	Type	Default
`stats` Three or four stats read best.	`Stat[]`	`exampleStats`
`layout` `plain` lets the stats float on whitespace; `divided` sets them in a hairline grid ruled above and below.	`StatsBandLayout` `"plain""divided"`	`"plain"`
`title`	`string`	—
`description`	`string`	—
`duration` Seconds each number takes to count up. Defaults to 1.6.	`number`	`1.6`
`locale` Number formatting locale. Fixed by default so server and client agree.	`string`	`"en-US"`
`className`	`string`	—

Also accepts the props of HTMLAttributes.