# Spec Sheet
URL: https://remocn.dev/docs/numbers/spec-sheet

A spec table with hairline rows reveals values in turn, then one row expands to feature its value.

- Install: `npx shadcn@latest add @remocn/spec-sheet`
- Vibe: clean
- Natural length: 84f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/spec-sheet
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { SpecSheet } from "@/components/remocn/spec-sheet";

const SpecSheetScene = () => (
  <SpecSheet title="Tech specs" highlight={3} rows={[{ label: "Resolution", value: "4K" }, { label: "Frame rate", value: "60 fps" }, { label: "Install", value: "1 command" }]} />
);

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

Hairline rules draw across and the labels and values reveal row by row, the values typing in. Then the highlighted row expands and its value grows in the accent gradient. Pass `rows`, `highlight` (row index), `title` and `name` (shown in the bottom lockup); it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `rows` | `SpecRow[]` | `DEFAULT_ROWS` | Table rows, each with a label and a value shown as text. |
| `highlight` | `number` | `3` | Zero-based index of the row that expands. |
| `title` | `string` | `"Tech specs"` | Heading shown above the table. |
| `name` | `string` | `"3.0"` | Name shown next to the logo in the bottom lockup. |
| `logo` | `React.ReactNode` | — | React node shown in the lockup instead of the default Remocn logo. |
| `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 beat listing product facts such as resolution, frame rate and license.
- A technical summary where one spec is the hero.
- A closing recap of what is included, in a compact table.

## Don't use when
- You compare two options side by side — use `versus-split`.
- Only one number matters — use `compact-stat`.
- The numbers should count up one after another — use `stat-sequence`.