Typewriter Text
The classic typewriter effect — text typed out character by character with a blinking cursor, with looping and deletion across multiple strings.
Types text out character by character with a blinking cursor. Pass a single string, or an array of strings to loop through a "type → hold → delete" rotation.
Loading preview…
npx shadcn@latest add https://webberui.com/r/typewriter-text.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
0.075
0.04
1.4
<TypewriterText />
Installation
npx shadcn@latest add https://webberui.com/r/typewriter-text.jsonOr, once registries are configured in components.json, install it as @webberui/typewriter-text.
Usage
import { TypewriterText } from "@/components/ui/typewriter-text";
<TypewriterText text={["Animated components", "Interactive interfaces", "Delightful experiences"]} />Pass a single string and turn loop off for a one-shot typing effect:
<TypewriterText text="Hello, world." loop={false} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | string[] | — | The string to type; an array loops through the strings one by one |
typeSpeed | number | 0.075 | Interval between typed characters (seconds) |
deleteSpeed | number | 0.04 | Interval between deleted characters (seconds) |
pauseDuration | number | 1.4 | How long a finished string is held before deletion starts (seconds) |
startDelay | number | 0 | Delay before the first run starts (seconds) |
loop | boolean | true | Whether to loop |
cursorChar | string | "|" | The cursor character |
showCursor | boolean | true | Whether to show the cursor |
cursorBlinkDuration | number | 1 | Cursor blink cycle (seconds) |
cursorClassName | string | — | Extra styles for the cursor |
Accessibility
- When the user has "reduce motion" enabled at the system level, the complete text is shown immediately and the cursor stops blinking
- The container carries an
aria-label(the complete sentence) and the typing process is hidden from assistive technology (aria-hidden), so what is announced is the complete content