# Bar Race

Ranked horizontal bars that grow and swap places smoothly as values change step by step, with a large step label.

```bash
npx shadcn add https://www.reelcn.dev/r/bar-race.json
```

Usage:

```tsx
<Sequence durationInFrames={150}>
  <Center>
    <BarRace
      steps={["2021", "2022", "2023", "2024"]}
      series={[
        { label: "Atlas", values: [12, 30, 45, 61] },
        { label: "Nimbus", values: [25, 34, 40, 44] },
        { label: "Quill", values: [8, 20, 52, 70] },
      ]}
    />
  </Center>
</Sequence>
```

Use for:

- Rankings over time: adoption by year, votes by round, leaderboard changes
- Five to twelve series with a value at every step

Avoid:

- A single snapshot. Use `bar-chart`


## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| delay? | `number` | — | Frames to wait before entering. |
| duration? | `number` | — | Enter duration in frames. Defaults to 0.6s. Some items reuse `duration` for an unrelated local timing. See that item's own prop docs. |
| exit? | `number \| boolean` | — | Exit at the end of the parent `<Sequence>`. `false` keeps it on screen, a number sets the exit length in frames. |
| motion? | `MotionPersonality` | — | Override the theme's motion personality. |
| poster? | `boolean` | — | Renders fully entered, with no exit: for a still frame or thumbnail. Defaults to `false`. |
| holdFrames? | `number` | — | Delays the start of the exit window by this many frames, for a minimum on-screen hold. Defaults to `0`. |
| series | `BarRaceSeries[]` | — |  |
| steps? | `string[]` | — | One label per step, such as years. Defaults to 1, 2, 3… |
| stepFrames? | `number` | — | Frames spent moving from one step to the next; the move eases, so the bars settle at every step. The race lasts `enter + (steps - 1) × stepFrames`, so size the Sequence to fit. |
| limit? | `number` | — | Bars shown at once. Lower ranks slide out of view. |
| width? | `number` | — | Width in design units. Defaults to the safe-area width. |
| height? | `number` | — | Height in design units. Defaults by orientation. |
| locale? | `string` | `"en-US"` | BCP 47 locale for numbers. |
| format? | `NumberFormatOptions` | — | `Intl.NumberFormat` options for the value labels. Defaults to the precision of the data. |
| colors? | `string[]` | — | Bar colors by series. Defaults to the theme palette, accent first. |
| labelColor? | `string` | — | Series labels. Defaults to the theme foreground. |
| valueColor? | `string` | — | Value labels. Defaults to the theme muted color. |
| stepColor? | `string` | — | The large step label. Defaults to the theme muted color. |
| style? | `CSSProperties` | — |  |
| className? | `string` | — |  |