Analytics Dashboard
A free analytics dashboard component for React and Tailwind, with KPI stat cards, charts, and a responsive grid layout. Copy, paste, and theme it to match your app in minutes.
Users
12.4k
MRR
$48k
Churn
1.2%
Copy the code
export function AnalyticsDashboard() {
const stats = [['Users','12.4k'],['MRR','$48k'],['Churn','1.2%']]
const bars = [40,70,55,85,60,90,75]
return (
<div className="w-80 rounded-2xl border border-white/10 bg-white/5 p-4 text-white">
<div className="grid grid-cols-3 gap-2.5">
{stats.map(([k,v]) => (
<div key={k} className="rounded-lg bg-white/5 p-2.5">
<div className="text-xs text-white/55">{k}</div>
<div className="mt-0.5 text-base font-extrabold">{v}</div>
</div>
))}
</div>
<div className="mt-3 flex h-14 items-end gap-1.5">
{bars.map((h,i) => <div key={i} style={{ height: `${h}%` }} className="flex-1 rounded bg-violet-600/60" />)}
</div>
</div>
)
}Tailwind CSS · no dependencies · MIT licensed. Paste it straight into any React, Next.js or Vite project.
About the analytics dashboard
This analytics dashboard is part of Empire UI — a free, open-source library of 26+ component types rendered across 40 visual styles, from glassmorphism to neo-brutalism. Every block is copy-paste ready in React and Tailwind CSS with no runtime dependencies.
Want it in a different look? Browse all 40 styles or grab the matching glassmorphism components.