Typewriter Text: Free React + Tailwind Component

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.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add typewriter-text.en

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Texttext

Typing speed (s per character)typeSpeed

0.075

Delete speed (s per character)deleteSpeed

0.04

Hold after typing (s)pauseDuration

1.4

Show the caretshowCursor

Caret charactercursorChar

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<TypewriterText/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add https://webberui.com/r/typewriter-text.en.json

Or, 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

Typewriter Text