# Share Donut
URL: https://remocn.dev/docs/numbers/share-donut

A gradient donut sweeps around to 38% with competitor shares labeled outside

- Install: `npx shadcn@latest add @remocn/share-donut`
- Vibe: data
- Natural length: 96f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/share-donut
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ShareDonut } from "@/components/remocn/share-donut";

const ShareDonutScene = () => (
  <ShareDonut
    highlight={0}
    segments={[
      { label: "remocn", value: 38 },
      { label: "Kitebase", value: 24 },
      { label: "Lumen", value: 17 },
      { label: "Other", value: 21 },
    ]}
  />
);

export const RemotionRoot = () => (
  <Composition
    id="ShareDonut"
    component={ShareDonutScene}
    durationInFrames={140}
    fps={30}
    width={1280}
    height={720}
  />
);
```

A gradient donut sweeps around one segment after another, then the highlighted slice detaches, the rest dim, and its percentage counts up in the center. Pass `segments` (label and value) and `highlight`, the index of the hero slice. Ships dark and light via `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `segments` | `DonutSegment[]` | `DEFAULT_SEGMENTS` | Slices of the donut, each with a label and value. |
| `highlight` | `number` | `0` | Index of the hero slice that gets the gradient. |
| `accent` | `string` | `"#3B5BFD"` | Accent color for the hero element. |
| `theme` | `"dark" \| "light"` | `"dark"` | Dark or light palette. |
| `speed` | `number` | `1` | Playback multiplier. |

## Use when
- A market-share or usage-share beat where one slice, such as 38%, is the headline.
- A poll or survey result where your option should detach and glow against grey competitors.
- A parts-of-a-whole scene with four or five labeled segments.

## Don't use when
- You want rectangles sized by value with room for labels — use `treemap-split`.
- You want shares shifting across several years — use `stacked-shift`.
- You want loose bubbles instead of a ring — use `bubble-pack`.