# Index List
URL: https://remocn.dev/docs/typography/index-list

A numbered feature index draws in row by row, then a gradient band travels down to one highlighted row.

- Install: `npx shadcn@latest add @remocn/index-list`
- Vibe: clean
- Natural length: 126f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/index-list
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { IndexList } from "@/components/remocn/index-list";

const IndexListScene = () => (
  <IndexList
    items={["Scenes", "Captions", "Transitions", "Templates"]}
    title="What is inside 2.0"
    highlight={2}
  />
);

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

Hairline rules draw across and a numbered list rises row by row under a logo and title; a gradient band then wipes in and travels down to the `highlight` row, where it parks with an arrow while the other rows dim. Pass `items`, `title`, the zero-based `highlight` index, and your own `logo` node (the default is the Remocn wordmark). It ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `items` | `string[]` | `DEFAULT_ITEMS` | Row labels, numbered automatically; the row height shrinks as you add more. |
| `highlight` | `number` | `3` | Zero-based index of the row the gradient band lands on. |
| `title` | `string` | `"What’s inside 3.0"` | Header text shown beside the logo. |
| `logo` | `React.ReactNode` | — | Header logo node; defaults to the Remocn wordmark, so pass your own. |
| `accent` | `string` | `"#3B5BFD"` | Color of the travelling highlight band. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |

## Use when
- A what's-inside beat that lists the main features of a release and lands on the one that matters most.
- A table-of-contents style recap near the end of a launch video, with a header and a feature count.

## Don't use when
- The lines should step in like indented code rather than a ruled index — use `indent-steps`.
- You have three big numbered steps instead of a long list — use `three-steps`.
- The features should appear as streaming pills around a logo — use `feature-chips-flow`.