Skip to main content
A horizontal stats card layout displaying key metrics with trend indicators. Shows positive and negative changes with color-coded percentage values.

​
Installation

Install the component from the Blocks registry: 
npx shadcn@latest add @blocks/stats-01

​
Dependencies

This component requires the following shadcn/ui components:
  • card

​
Usage

import Stats01 from "@/components/stats-01";

export default function Page() {
  return <Stats01 />;
}

​
Features

  • Trend indicators - Color-coded positive/negative changes
  • Responsive grid - Adapts from 1 to 4 columns
  • Rounded layout - Clean, modern card design
  • Tabular numbers - Monospaced font for better readability
  • Dark mode support - Automatic theme adaptation

​
Use Cases

  • Financial dashboards
  • Business metrics overview
  • Performance tracking
  • KPI monitoring
  • Analytics dashboards

Build docs developers (and LLMs) love

Get started for freeTalk to us