Back to Components
Charts
Metric Grid
Responsive grid of stat cards with configurable column counts.
PropsUsage ExampleVariations
Monthly recurring revenue
$0
vs previous period6.8%
Active subscribers
0
vs previous period1.2%
Retention rate
93%
vs previous periodStable
Avg order value
$0
vs previous period2.4%
Dependencies
- clsx
- tailwind-merge
Files
- components/ui/metric-grid.tsx
Installation
Using shadcn CLI
npx shadcn add metric-grid --url https://ui.hampton.ioManual installation
Copy the component file to your project and install dependencies:
npm install clsx tailwind-mergeRelated Charts Components
Bar Chart
Simple bar chart with labels, values, and optional horizontal layout.
Bar Chart Simple
Basic bar chart with vertical or horizontal layouts.
Chart Container
Wrapper component with title, subtitle, legend slot, and responsive chart area.
Donut Chart
Ring chart with centered value and label.
Leaderboard
Ranked list with positions, avatars, scores, and optional trend badges.
Line Chart
Line chart with multiple series, points, labels, and optional area fill.