# Typewriter

> Types phrases out, deletes them and moves on, with a blinking caret.

Component · Pro · https://lodeui.com/components/typewriter

## When to use

- Hero headlines that cycle through use cases.
- Terminal-style install hints.

## When not to use

- Anything people need to read quickly or copy.

## Installation

```bash
npx shadcn@latest add @lode/typewriter
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { Typewriter } from "@/components/ui/typewriter";

<h1>
  Build <Typewriter words={["dashboards", "onboarding", "pricing pages"]} /> fast.
</h1>
```

## API reference

### Typewriter

An inline span that types, pauses, deletes and moves to the next phrase.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| words | `string[]` | – | Phrases in order. |
| typingSpeed / deletingSpeed | `number` | `60 / 32` | ms per character. |
| pause | `number` | `1500` | ms to hold a finished phrase. |
| loop | `boolean` | `true` | Start over after the last phrase; otherwise stop on it. |
| caret | `boolean` | `true` | Blinking caret. |

## Accessibility

- Screen readers get every phrase once, from a hidden list; the typing is aria-hidden.
- Under reduced motion it shows the first phrase, without typing.

## Motion

- Characters appear on a timer; the caret blinks once per second.

## Responsive behavior

- Inline text that wraps with its sentence.

## Performance

- One timeout at a time, cleared on unmount.

## Notes for AI

- Keep phrases a similar length so the layout doesn't jump much.

## Related

- [Word rotate](https://lodeui.com/components/word-rotate) — Cycles words in place with a blur-slide while the width springs to fit.
- [Text scramble](https://lodeui.com/components/text-scramble) — Characters cycle through glyphs and settle into the final text.
- [Text reveal](https://lodeui.com/components/text-reveal) — Text that rises out of a blur, word by word, as it scrolls into view.