Stats

Key metrics displayed in a responsive grid layout.

Preview

By the numbers

Key metrics at a glance. Drop this block anywhere you need social proof.

60+

Components

Production-ready primitives

8

Themes

Curated color palettes

2x

Faster

Less time on UI plumbing

Installation

terminal
$
Other package managers 
bunx --bun shadcn@latest add https://trents.tech/r/stats.json

Usage

stats-demo.tsx
import Stats from "@/components/blocks/stats"

export default function StatsDemo() {
  return (
    <Stats
      // Update the headline and supporting text.
      title="By the numbers"
      description="Key metrics at a glance. Drop this block anywhere you need social proof."
      // Each stat needs a value and label. Description is optional.
      stats={[
        {
          value: "60+",
          label: "Components",
          description: "Production-ready primitives",
        },
        {
          value: "8",
          label: "Themes",
          description: "Curated color palettes",
        },
        {
          value: "2x",
          label: "Faster",
          description: "Less time on UI plumbing",
        },
      ]}
    />
  )
}
0