# Select Replace
URL: https://remocn.dev/docs/typography/select-replace

A phrase is selected like text in an editor, deleted, and replaced with new styled words.

- Install: `npx shadcn@latest add @remocn/select-replace`
- Vibe: tech
- Natural length: 130f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/select-replace
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { SelectReplace } from "@/components/remocn/select-replace";

const SelectReplaceScene = () => (
  <SelectReplace text="Draft it next week." edits={[{ from: "Draft", to: "Ship" }, { from: "next week", to: "tonight" }]} />
);

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

The `text` shows, then each `edits` item selects a `from` phrase and swaps in its `to` replacement with a highlight. Pass `text` and `edits` with the phrases you want changed. It ships in light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"Draft it next week."` | Starting sentence containing every `from` phrase. |
| `edits` | `SelectReplaceEdit[]` | — | List of `{ from, to }` replacements applied in order. |
| `accent` | `string` | `"#3B5BFD"` | Accent color override; falls back to the theme accent. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark; picks the palette. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |

## Use when
- An editor-style beat that rewrites a slow plan into a fast one.
- A copy-change demo where two phrases are corrected in sequence.
- A dev or writing tool scene that mimics a real text selection.

## Don't use when
- A single misspelling should be fixed in place — use `typo-fix`.
- The change should read as a code diff — use `diff-swap`.
- Words should be inserted into a sentence, not replaced — use `word-insert`.