Donut Chart Components

Dev Design Library indexes 31 donut chart components from 13 open-source UI libraries, with the most coming from Tremor Blocks, Amicro Micro Transitions, ReUI, shadcn/ui and Shark UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. Donut chart components belong to the Data display group.

• Chart Pie Donutshadcn/ui · React
• Donut ChartChakra UI · ReactUsed to display data as segments of a circular chart that looks like a donut
• Donut ChartTremor · React
• Donut chart with center totalReUI · ReactDonut chart with center total
• Dither Donut ChartAmicro Micro Transitions · ReactInteractive pixelated dither donut chart with real-time spring physics.
• Donut ChartbeUI · ReactRounded share segments with a linked center readout and legend.
• Pie ChartSpectrum UI · ReactPie and donut charts with padded sectors, labels, and optional sector glow.
• Ring ChartPanel UI · React NativeConcentric arcs, each measured against its own target.
• Donut ChartTremor Blocks · ReactThe base donut or pie chart (Recharts) with a centre label showing the total.
• Chart Pie DonutShark UI · React
• Donut ChartUI Lab · ReactDraws itself in, then lifts whichever slice you point at.
• Pie chartCojeev UI · ReactShow proportions using themed pie and donut layouts, with readable totals and segment inspection.
• Pie ChartReactFrame · ReactA donut-style pie chart with a live center total, click-to-toggle legend, percentage callouts around the ring, and a…
• Chart Pie Donut Activeshadcn/ui · React
• Donut chart with center statsReUI · ReactDonut chart with center stats
• Device Usage ChartAmicro Micro Transitions · React
• Web Ring ChartPanel UI · React NativeActivity rings that fill toward daily goals, with replay and toggles.
• Donut Chart 01Tremor Blocks · React
• Chart Pie Donut ActiveShark UI · React
• Chart Pie Donut Textshadcn/ui · React
• Bug priority pie with stripe patternsReUI · ReactBug priority pie with stripe patterns
• Mono Rounded Donut ChartAmicro Micro Transitions · React
• Donut Chart 02Tremor Blocks · React
• Chart Pie Donut TextShark UI · React
• Active segment donut with center labelReUI · ReactActive segment donut with center label
• Storage Usage ChartAmicro Micro Transitions · React
• Donut Chart 03Tremor Blocks · React
• Donut Chart 04Tremor Blocks · React
• Donut Chart 05Tremor Blocks · React
• Donut Chart 06Tremor Blocks · React
• Donut Chart 07Tremor Blocks · React

Libraries with donut chart components

• Tremor Blocks
• Amicro Micro Transitions
• ReUI
• shadcn/ui
• Shark UI

Related categories

• Tailwind CSS Donut Chart Components
• Animated Donut Chart Components
• Data Display Components
• Card Components
• Chart Components
• Table Components
• Avatar Components
• List Components
• Stat Components
• Calendar Components
• Accordion Components
• Data Table Components
• Carousel Components
• Collapsible Components
• Avatar Group Components
• Stat Card Components
• Bar Chart Components
• Tree View Components