Tailwind CSS Donut Chart Components

Dev Design Library indexes 30 Tailwind CSS donut chart components from 12 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. Every library in this list styles its components with Tailwind CSS utility classes. Donut chart components belong to the Data display group.

• Chart Pie Donutshadcn/ui · React
• 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 Tailwind CSS donut chart components

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

Related categories

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