Blode UI
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" />