# Unit Grid
URL: https://remocn.dev/docs/numbers/unit-grid

A grid of dots lights up a share of them beside a stat line and caption.

- Install: `npx shadcn@latest add @remocn/unit-grid`
- Vibe: data
- Natural length: 104f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/unit-grid
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { UnitGrid } from "@/components/remocn/unit-grid";

const UnitGridScene = () => (
  <UnitGrid total={100} highlighted={33} caption="1 in 3 teams ship weekly" />
);

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

Dots fade in across the grid, then the highlighted dots flip to the accent color in a sweeping order while the stat line and caption come in. Pass `total`, `highlighted` and `caption`; a total of 100 lays out as ten by ten, and it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `total` | `number` | `100` | Number of dots in the grid. |
| `highlighted` | `number` | `33` | How many dots light up. |
| `caption` | `string` | `"1 in 3 teams ship weekly"` | Line shown under the stat. |
| `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 one in three or 33 percent claim shown as a countable share of dots.
- A proportion that should feel tangible rather than abstract.
- A survey result where each dot stands for one person or team.

## Don't use when
- You compare shares among competitors — use `share-donut`.
- You want a hex-cell fill with a percent reading — use `hex-fill`.
- You just need a big plain stat — use `compact-stat`.