GitHub

Stat

PreviousNext

Display a compact metric with title and supporting description.

12,408
Active users
+8.2% from last week
import { Stat } from "@/components/ui/stat";
 
export function StatDemo() {
  return (
    <div className="w-full max-w-xs">
      <Stat
        description="+8.2% from last week"
        title="Active users"
        value="12,408"
      />
    </div>
  );
}

Installation

npx shadcn@latest add "https://ui.blode.co/r/styles/default/stat"

Usage

import { Stat } from "@/components/ui/stat";
<Stat
  description="+8.2% from last week"
  title="Active users"
  value="12,408"
/>