Shadcn.io is not affiliated with official shadcn/ui
React Donut Chart
Donut chart with hollow center for modern dashboards
React Donut Chart preview
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.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this chart for you — no copy-paste, no CLI:
use shadcnio to install the pie-donut chart into my projectRelated 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.