# The Tab
URL: https://remocn.dev/docs/numbers/the-tab

A receipt of dotted-leader lines prices every item the same, then lands a total line.

- Install: `npx shadcn@latest add @remocn/the-tab`
- Vibe: clean
- Natural length: 122f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/the-tab
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { TheTab } from "@/components/remocn/the-tab";

const TheTabScene = () => <TheTab items={[{ item: "Every component" }, { item: "Every template" }]} price="$0" total="one Sunday morning." />;

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

A receipt builds line by line, each item joined to its price by a dotted leader; a rule draws under the list and the total lands word by word in the accent color. Pass `items` (each `{ item, price? }`), `price` as the default per-line price, and `totalLabel` with `total`. The row pacing stretches to the composition length, so give it about 170 frames. It ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `items` | `TheTabItem[]` | `DEFAULT_ITEMS` | Receipt rows; each has an item name and an optional price. |
| `price` | `string` | `"$0"` | Default price shown on rows without their own. |
| `totalLabel` | `string` | `"Total"` | Label for the total line. |
| `total` | `string` | `"one Sunday morning."` | Total text that lands word by word. |
| `accent` | `string` | — | Color of the total; defaults to the theme accent. |
| `background` | `string` | — | Stage background color; overrides the theme ground. |
| `speed` | `number` | `1` | Playback speed multiplier. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |

## Use when
- A what-you-get beat where every included item carries the same price, such as zero.
- A pricing close that ends on a witty total instead of a number.
- A clean receipt-style list of features that should build line by line.

## Don't use when
- Fine print should be removed one line at a time - use `price-page`.
- A single price needs a strikethrough and a spin - use `price-slate`.
- A technical spec table with hairline rows is the look - use `spec-sheet`.