Shadcn.io is not affiliated with official shadcn/ui
React Donut Chart
Donut chart with hollow center for modern dashboards
The modern alternative to solid pies. This React donut chart adds innerRadius to create a hollow center—cleaner, more contemporary, and ready for center content. The ring shape is easier on the eyes and leaves room for totals, icons, or labels in the middle. Built with Recharts and shadcn/ui, just add innerRadius=60 (or any pixel value) to your Pie component. Perfect for Next.js dashboards, portfolio breakdowns, or any visualization where you want that polished donut aesthetic over the classic filled pie.
React Donut Chart preview
Installation
Related Components
Donut with Center Text
Total value in the middle
Donut with Active State
Highlight on hover
Simple Pie Chart
Solid pie without hole
Pie Chart with Legend
Add category legend
Interactive Pie Chart
Add selection controls
Stacked Pie Chart
Nested rings
FAQ
Was this page helpful?
Sign in to leave feedback.