Stats Card 9 - KPI with tooltip infoPro
KPI cards whose labels carry an info icon that opens a tooltip defining how the metric is calculated, with the value, trend and data freshness note below. Use it for finance or analytics dashboards where metric definitions like ARR or NRR need to be explained.
About Stats Card 9
KPI cards whose labels carry an info icon that opens a tooltip defining how the metric is calculated, with the value, trend and data freshness note below. Use it for finance or analytics dashboards where metric definitions like ARR or NRR need to be explained.
Stats Card 9 is a pro stats card block for React, built on shadcn/ui and Tailwind CSS. It ships as 82 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.
- stats
- kpi
- tooltip
- definitions
- finance
- saas
Installation
- Add the Chocolate UI registry to your
components.json(see the installation guide). - Run the shadcn CLI:
npx shadcn@latest add @chocolate/stats-card-09Dependencies installed automatically: lucide-react.
Uses: number-ticker, reveal, tooltip, utils.
Usage
import StatsCard09 from "@/components/blocks/stats-card-09"
export default function Page() {
return <StatsCard09 />
}