benflux/ui
Data Display

Statistic

Displays key metrics with animated number counters and trend indicators.

Total Revenue

$45,231

+20.1% from last month
Active Users

2,350

+15.3% from last month
New Orders

1,247

-4.2% from last month
Uptime

99.9%

+0.1% from last month

Installation

npx benflux-ui add statistic

Usage

import { Statistic, StatisticCard } from "@/components/ui/statistic"
import { DollarSign } from "lucide-react"

// Simple statistic
<Statistic
  label="Total Revenue"
  value={45231}
  prefix="$"
  trend={{ value: 20.1, direction: "up", label: "from last month" }}
/>

// Card variant
<StatisticCard
  label="Active Users"
  value={2350}
  icon={<Users />}
  trend={{ value: 15.3, direction: "up" }}
/>