$99 launch price

Components

Dither Donut

Pro

Customize

<DitherDonut size={260} total={{"label":"Visits"}} />

Installation

ProRequires a Planes Pro license.
npx shadcn add @useplanes/dither-donut

Works once the @useplanes registry is set up in your project (one-time). After that, copy and run commands directly.

Unlock with Planes Pro

$99 once · 132 Pro components · lifetime updates.

I have a licenseGet Pro
<DitherDonut
  data={[
    { name: "Direct", value: 48200 },
    { name: "Search", value: 31600 },
    { name: "Social", value: 18900, colors: ["#3b0a1f", "#be185d", "#fbcfe8"] },
  ]}
  total={{ label: "Visits" }}
/>

Use cases

  • Traffic sources

    Where visitors come from, with the total front and centre.

  • Revenue mix

    Plans or regions as a share of sales for a billing dashboard.

  • Storage breakdown

    What is filling a disk or quota, by type.

  • Portfolio allocation

    Asset classes as a halftone ring that reads on paper-white and ink-black.