# Pixel Bars
URL: https://remocn.dev/docs/numbers/pixel-bars

LED-style pixel bars climb, the last column lighting orange and blue to +64%

- Install: `npx shadcn@latest add @remocn/pixel-bars`
- Vibe: data
- Natural length: 81f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/pixel-bars
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { PixelBars } from "@/components/remocn/pixel-bars";

const PixelBarsScene = () => (
  <PixelBars
    values={[31, 38, 35, 44, 41, 50, 84]}
    metric="+64%"
    label="this quarter"
  />
);

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

Columns of LED-style pixels light up bar by bar; the last column climbs past the previous best, turns orange and blue, and the metric counts up beside the chart. Pass `values` (one number per column), `metric` and `label`. Ships dark and light via `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `values` | `number[]` | `DEFAULT_VALUES` | One number per column; the last is the hero. |
| `label` | `string` | `"this quarter"` | Small line under the metric. |
| `metric` | `string` | `"+64%"` | The big stat that counts up, such as +64%. |
| `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 short growth beat in a retro LED style, where the last column passes the rest and lands a stat.
- A quarter-over-quarter claim such as +64% that needs a compact chart and a big number.
- A fast scene with a tech or arcade flavor rather than a polished editorial chart.

## Don't use when
- You want smooth springy bars with an overshoot — use `spring-bars`.
- You need labeled categories on the axis — use `log-rescale`.
- You want a bold stat with no chart — use `compact-stat`.