Back to Components
Cards
KPI Widget
KPI display with target vs actual values, progress bar, and trend indicator.
Monthly Revenue
$84,500/ $100,000
Progress to target85%
vs last period12.4%
New Users
1,842/ 1,500
Progress to target100%
vs last month2.1%
Conversion Rate
3.8%/ 5.0%
Progress to target76%
Dependencies
- clsx
- tailwind-merge
Files
- components/ui/kpi-widget.tsx
Installation
Using shadcn CLI
npx shadcn add kpi-widget --url https://ui.hampton.ioManual installation
Copy the component file to your project and install dependencies:
npm install clsx tailwind-merge