Area Chart
A free React area chart with smooth gradient fills, built with Tailwind and ready to copy-paste. Drop it into any dashboard to visualize trends over time.
Revenue · 7d
Copy the code
export function AreaChart() {
return (
<div className="w-72 rounded-2xl border border-white/10 bg-white/5 p-4 text-white">
<p className="text-sm text-white/60">Revenue · 7d</p>
<svg viewBox="0 0 240 80" className="mt-2 h-20 w-full">
<defs>
<linearGradient id="ac" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stopColor="#7c4dff" stopOpacity="0.5" />
<stop offset="1" stopColor="#7c4dff" stopOpacity="0" />
</linearGradient>
</defs>
<path d="M0 60 L40 45 L80 52 L120 30 L160 36 L200 16 L240 24 L240 80 L0 80 Z" fill="url(#ac)" />
<path d="M0 60 L40 45 L80 52 L120 30 L160 36 L200 16 L240 24" fill="none" stroke="#7c4dff" strokeWidth="2.5" />
</svg>
</div>
)
}Tailwind CSS · no dependencies · MIT licensed. Paste it straight into any React, Next.js or Vite project.
About the area chart
This area chart 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.