Pie Chart Components

Dev Design Library indexes 52 pie chart components from 15 open-source UI libraries, with the most coming from shadcn/ui, Shark UI, Tremor Blocks, Amicro Micro Transitions and ReUI. Each one links to its page with the source code, a live preview where available, the library license and the install command. Pie 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.
• ChartsUntitled UI React · React
• 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.
• Pie ChartPanel UI · React NativeOne whole, divided between its parts.
• Chart 02 - Earnings Pie ChartShadcn Space · ReactA clean donut chart widget summarizing total earnings with source-wise breakdown, perfect for admin dashboards to…
• 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
• Pie ChartChakra UI · React
• Donut chart with center statsReUI · ReactDonut chart with center stats
• Device Usage ChartAmicro Micro Transitions · React
• Ring ChartPanel UI · React NativeConcentric arcs, each measured against its own target.
• 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
• Web Pie ChartPanel UI · React NativeA pie chart with hover detail and toggles to show or hide slices.
• Donut Chart 02Tremor Blocks · React
• Chart Pie Donut TextShark UI · React
• Chart Pie Interactiveshadcn/ui · React
• Active segment donut with center labelReUI · ReactActive segment donut with center label
• Storage Usage ChartAmicro Micro Transitions · React
• Web Ring ChartPanel UI · React NativeActivity rings that fill toward daily goals, with replay and toggles.
• Donut Chart 03Tremor Blocks · React
• Chart Pie InteractiveShark UI · React
• Chart Pie Labelshadcn/ui · React
• Donut Chart 04Tremor Blocks · React
• Chart Pie LabelShark UI · React
• Chart Pie Label Customshadcn/ui · React
• Donut Chart 05Tremor Blocks · React
• Chart Pie Label CustomShark UI · React
• Chart Pie Label Listshadcn/ui · React
• Donut Chart 06Tremor Blocks · React
• Chart Pie Label ListShark UI · React
• Chart Pie Legendshadcn/ui · React
• Donut Chart 07Tremor Blocks · React
• Chart Pie LegendShark UI · React
• Chart Pie Separator Noneshadcn/ui · React
• Chart Pie Separator NoneShark UI · React
• Chart Pie Simpleshadcn/ui · React
• Chart Pie SimpleShark UI · React
• Chart Pie Stackedshadcn/ui · React
• Chart Pie StackedShark UI · React

Libraries with pie chart components

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

Related categories

• Tailwind CSS Pie Chart Components
• Animated Pie 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