shadcn.io is not affiliated with official shadcn/ui
Donut Center Readout Stats Block for Radix UI
An ad-spend donut whose middle follows your choice: it shows the total until you press a channel, then that channel's spend and share while its arc lifts out of the ring.
Installation
Overview
A donut with a selection-driven centre for React with Radix UI. A start-aligned header ("Search and social took 64% of ad spend") sits over a card in a card: a muted shell with a + on each corner round a raised panel. In the panel, a donut of the last 28 days' ad spend in five solid foreground weights (from twelve o'clock, clockwise, largest channel first, a 2 px gap between neighbours), and the five channels as a list of buttons at its end. By default the middle shows the total spend. Press a channel and its arc lifts out of the ring (it grows thicker) while the middle shows the channel's name, its spend (the digits roll) and its share; press it again and the middle goes back to the total. The shares are whole numbers that add up to 100. The donut is at the start of the panel and the list at its end from lg; on a phone the donut comes first. It's built from Guides and SlidingNumber, with SVG circles for the ring and plain buttons for the choice, so it is identical on every library.
FAQ
How do I change the channels?
Edit CHANNELS at the top of the file: each has an id, a label and the spend. Up to five weights are defined in WEIGHTS. The total, the shares, the arcs, the rows and the header's headline are all computed from the list; nothing else needs editing.
How does the selection work?
Each row is a native button with aria-pressed. One channel can be pressed at a time: pressing another moves the lift and the middle to it, and pressing the pressed one again clears the choice, so the middle shows the total. Tab moves between the rows and Space or Enter presses one. The state is plain React state (picked), so you can also drive it from elsewhere.
Is it accessible?
The rows are real buttons in a list, named by their text, and the pressed one has a foreground bar on its start edge as well as a tint, so it never relies on colour alone. The donut is hidden from assistive technology since the list says the same, and a polite status line says what the middle shows after each press ("Social: $12,760, 26% of spend").