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 const StatDemo = () => (
  <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" />