# Number Split
URL: https://remocn.dev/docs/numbers/number-split

A big total splits down a bracket into colored bars, each with its own count and label.

- Install: `npx shadcn@latest add @remocn/number-split`
- Vibe: data
- Natural length: 110f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/number-split
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { NumberSplit } from "@/components/remocn/number-split";

const NumberSplitScene = () => (
  <NumberSplit total="300+" label="components" parts={[{ label: "animations", value: 120 }, { label: "transitions", value: 90 }]} />
);

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

The total sits large, a gradient bar slides in beneath it and splits into segments joined by a bracket, then each part counts up with its label. Pass `total`, `label` and `parts`; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `total` | `string` | `"300+"` | Large figure shown at the top, as text. |
| `label` | `string` | `"components"` | Word shown next to the total. |
| `parts` | `SplitPart[]` | `DEFAULT_PARTS` | Category counts, each drawn as a colored bar with a label. |
| `accent` | `string` | `"#3B5BFD"` | Accent color for highlights and small marks. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color theme, "dark" or "light". |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |

## Use when
- A catalog or library count that should break down into categories.
- A usage or pricing total that splits into a few named components.
- A launch beat where the headline number needs proof of what it is made of.

## Don't use when
- The parts should read as proportions of a whole — use `share-donut`.
- You only have one number — use `compact-stat`.
- The split should shift across years as a stacked bar — use `stacked-shift`.