Usage Split
- from @d2
- by D2 Studio
Token usage split three ways across one shared track. The segments sit in a single rail rather than three of their own, because the point of the picture is that they add up to a budget. The largest share carries a blue to sky gradient, held in hex rather than tokens because it is the one lit thing in the picture and a token that reskins with the page would take the highlight with it; the other two are the host's own token at two depths, so the chart stays legible in whatever palette the host is running and a second hue never reads as a second measurement. One component and one stylesheet, no dependencies and no client hooks.
Install
New to shadcn? Set up your project
If your project already has a shadcn components.json, skip initialization. Otherwise, run this once from your project root.
pnpm dlx shadcn@latest initpnpm dlx shadcn@latest add @d2/visualization-01Live preview
No live preview has been built for this component yet.
Registry dependencies0
The CLI adds no other registry items with this one.
Packages0
No npm packages are installed with it.
