Typewriter
Types each word with a human rhythm, holds it, deletes it and moves on. Screen readers hear the full list once.
- Category: Text
- Licence: Free, MIT
- Built with: React 19, Tailwind CSS 4, Motion
- Dependencies: motion, clsx, tailwind-merge
Examples
Typewriter
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
words | string[] | — | |
typeSpeed | number | 70 | ms per typed character. |
deleteSpeed | number | 40 | ms per deleted character. |
pause | number | 1400 | |
loop | boolean | true |
About Typewriter
Typewriter types each word with a human rhythm, holds it, deletes it and moves on, with a blinking caret. It is the classic hero effect, done without the robotic metronome.
Typewriter is a text animation for React 19, styled with Tailwind CSS 4 and animated with Motion. It drops into Next.js, Vite, Remix or Astro through the shadcn CLI as a single file you own.
When to use Typewriter
- Hero headings that cycle use cases.
- Search boxes with suggested queries.
- Chat and AI demos.
- Developer portfolios.
How it works
Delays between characters vary slightly so it reads as typing, not ticking. Screen readers hear the full list once, and reduced motion shows the first word statically.
The real text stays in the page for screen readers and search engines; the animated letters are decorative copies marked aria-hidden. With prefers-reduced-motion on, it holds still or settles instantly instead of animating.
Customizing Typewriter
Every prop is documented in the API reference above with its type and default. The ones you will reach for first are listed here.
The Customize panel next to the preview lets you change typeSpeed, deleteSpeed, pause, loop live, and the Code tab updates to match, so the snippet you copy already carries your values.
- words (string[]).
- typeSpeed (number, default 70): ms per typed character.
- deleteSpeed (number, default 40): ms per deleted character.
- pause (number, default 1400).
- loop (boolean, default true).
Goes well with Typewriter
Typewriter is already composed into a ready-made section, so you can see it in context or install the whole block.
- Hero Search: Hero section
- Text Reveal: A React text reveal: words rise out of a blur one after another as they scroll in
- Shimmer Text: React shimmer text: a band of light sweeps across, for loading and thinking states
- Gradient Text: React gradient text with a slowly flowing accent gradient, CSS only
- Scramble Text: React scramble text: characters cycle through glyphs before locking in
- Rotating Text: React rotating text that rolls between words letter by letter and resizes smoothly
Install Typewriter
npx shadcn@latest add https://charcoalui.com/r/typewriter.jsonTypewriter is free and MIT licensed. The command copies typewriter.tsx into components/ui and installs clsx, tailwind-merge; you can also copy the source from the Code tab by hand.
It pairs well with Scramble Text, a Pro piece: Characters cycle through glyphs before locking in, left to right.
Frequently asked questions
- How do I install Typewriter?
- Run npx shadcn@latest add https://charcoalui.com/r/typewriter.json. The shadcn CLI copies typewriter.tsx into components/ui and installs motion, clsx, tailwind-merge. You can also copy the source from this page by hand.
- Is Typewriter free for commercial use?
- Yes. Typewriter is MIT licensed: use it in any personal or commercial project and change it however you like.
- Does Typewriter work with Next.js?
- Yes. It is a client component for React 19 styled with Tailwind CSS 4, so it works in the Next.js App Router and Pages Router, Vite, Remix and Astro.
- Can an AI coding agent install Typewriter?
- Yes. Connect the Charcoal UI MCP server (https://charcoalui.com/mcp) to Claude Code, Cursor or any MCP client; get_component returns Typewriter's props and source and get_install_command returns the exact command.