# Spend breakdown donut

Spend breakdown donut: a free component, built on your design tokens, to use for showing how a total splits into a few categories. Spend split into four categories as a donut with the total in the middle, and a legend that lists each amount and share.

Prompt: Add the OpenDesigner component donut-breakdown to this project: https://opendesigner.dev/library/r/donut-breakdown.html. Keep its markup and states; map its --ds-* variables to my tokens.

States: hover row highlights its segment.

Accessibility: The drawing is hidden from screen readers; the legend list carries every category, amount and share, and its label gives the total.

File: https://opendesigner.dev/library/r/donut-breakdown.html