TypewriterPro
Types phrases out, deletes them and moves on, with a blinking caret.
Build dashboards, onboarding, pricing pages, AI chat
in an afternoon.
$ npx shadcn@latest add @lode/dock, npx shadcn@latest add @lode/drawer
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
Usage
Import it from @/components/ui/typewriter after installing.
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.
This page as Markdown, for assistants and coding agents:
/components/typewriter/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt