# Price Page
URL: https://remocn.dev/docs/numbers/price-page

A list of fine-print pricing lines drops away one by one until a huge price and a note remain.

- Install: `npx shadcn@latest add @remocn/price-page`
- Vibe: clean
- Natural length: 138f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/price-page
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { PricePage } from "@/components/remocn/price-page";

const PricePageScene = () => <PricePage lines={["Starter, Pro, Team, Enterprise", "Per seat, per month", "Overage fees may apply"]} price="Free." />;

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

A small label tops a stack of fine-print pricing lines; the lines drop out one by one in a scrambled order until the list is gone, then a huge price lands and a note fades in beneath it. Pass `lines`, `price` and `note`. The timing stretches to the composition length, so give it about 180 frames. It ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `label` | `string` | `"Pricing"` | Small label above the list. |
| `lines` | `string[]` | `DEFAULT_LINES` | Fine-print lines that exit one by one. |
| `price` | `string` | `"Free."` | The huge price that remains. |
| `note` | `string` | `"That’s the whole pricing page."` | Closing line under the price. |
| `accent` | `string` | — | Color of the price; 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 pricing beat that joins to the message that the product is free or simple.
- A comedic setup where complicated plan details are visibly deleted to leave one number.
- A short closing statement under a huge price, such as a one-line promise.

## Don't use when
- You want a receipt that totals to a single line - use `the-tab`.
- The old price should be struck through and replaced - use `price-slate`.
- A single word needs several short glosses instead - use `free-as-in`.