Donut Breakdown
A monochrome donut chart widget: hover a slice or legend row to lift it and show its share in the centre.
donut-breakdown.tsxdonut-breakdown.css
Checking access…
Overview
Slices use tones of one colour instead of a rainbow. Hovering or focusing a slice or its legend row pushes the slice out slightly, dims the others and swaps the centre to that category’s value and share.
Slices draw in clockwise on mount.
When to use
- Spending, storage, traffic sources: 3–6 parts of a whole.
When not to use
- Comparing many similar values: use bars.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/donut-breakdown.json$
npx shadcn@latest add https://sundaeui.dev/r/donut-breakdown.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/donut-breakdown.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/donut-breakdown.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy donut-breakdown.tsx and donut-breakdown.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { DonutBreakdown } from '@/components/sundae/donut-breakdown'
<DonutBreakdown />Props
| Prop | Type | Default |
|---|---|---|
data*Slices. | { label: string; value: number }[] | — |
formatValue formatter. | (n: number) => string | — |
titleCentre caption when nothing is hovered. | string | 'Total' |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- The SVG is aria-hidden; the legend is a list of buttons with value and percentage, which drives the same highlight.
- A visually hidden table carries the data.
- Reduced motion removes the movement and keeps every state change.
Customization
- Colours are CSS custom properties on .sd-dnt; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
FAQ
- Is Donut Breakdown free?
- Donut Breakdown is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Donut Breakdown?
- Run npx shadcn@latest add https://sundaeui.dev/r/donut-breakdown.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Donut Breakdown support keyboard and screen readers?
- The SVG is aria-hidden; the legend is a list of buttons with value and percentage, which drives the same highlight. A visually hidden table carries the data.
- Does Donut Breakdown respect reduced motion?
- Reduced motion removes the movement and keeps every state change.
More like this
All data →Weather Forecast
Data · RefinedStacked Bars
Data · Refined- Pro
Scrub Sparkline
Data · Refined - Pro
Tick Gauge
Data · Refined - Pro
Range Line Chart
Data · Refined - Pro
Weekly Bars
Data · Refined