Stats Section
A quiet marketing stats band with four large numbers that count up when scrolled into view. Each stat pairs a small trend with a thin animated underline, with dividers on desktop and a 2x2 grid on phones.
Preview
Resize it, switch the theme, replay the entrance — or read the source.
Momentum, measured
A quiet snapshot of how teams put the platform to work, updated every quarter.
- Active teams
- 18,600+24.6%vs last year
- Projects shipped
- 1,280,000++18.4%vs last year
- Platform uptime
- 99.98%+0.02 ptslast 90 days
- Average rating
- 4.9/5+6.5%vs last year
Installation
Add the block to a project that already uses shadcn/ui.
npx shadcn@latest add https://prequelui.terravidhal.me/r/stats-section.jsonRequires a project that already uses shadcn/ui on React and Tailwind CSS v4. The block is copied into your project as a single file you own and can edit.
Usage
Import the named export and render it with your own data.
Every prop is optional and ships with deterministic demo data, so a bare render shows the block at its default. Pass props to plug in your own data and formatters.
import { StatsSection } from "@/components/prequel/stats-section/stats-section";
export default function DashboardPage() {
return <StatsSection />;
}import { StatsSection } from "@/components/prequel/stats-section/stats-section";
export default function DashboardPage() {
return <StatsSection />;
}Props
Every prop is optional and ships with demo-data defaults.
| Prop | Type | Description |
|---|---|---|
className | string | Extra classes merged onto the root element. |
heading | string | Optional section heading. Pass an empty string to hide it. |
subheading | string | Optional supporting line under the heading. |
stats | StatsSectionStat[] | — |
formatValue | (value: number, stat: StatsSectionStat) => string | — |
Accessibility
The rules every PrequelUI block follows, verified against this block's source.
Charts and graphics expose a text summary via role="img" and an aria-label describing the data.
Interactive charts respond to arrow keys, Home and End, and show tooltips on keyboard focus.
Every button carries a visible focus ring so keyboard users can always see where they are.
The block honours prefers-reduced-motion: animations are skipped and content is fully visible.
Live updates run on timers inside effects and pause when the block is off-screen or hovered.