Typewriter Text

Character-by-character typing with blinking cursor, configurable speed, and delete-retype loop.

UniqueUI CLI

npx uniqueui add typewriter-text

shadcn CLI

npx shadcn@latest add https://uniqueui.com/r/typewriter-text.json -y

shadcn path expects @/lib/utils (run shadcn init first). Same source file is installed to components/ui/.

Preview

I love

Usage

import { TypewriterText } from "@/components/ui/typewriter-text";

export default function Example() {
  return (
    <div className="space-y-6 text-center p-10">
      <div className="text-3xl font-bold text-white">
        I love{" "}
        <TypewriterText
          words={["React", "TypeScript", "Motion", "Tailwind", "UniqueUI"]}
          className="text-purple-400"
          typingSpeed={100}
          deletingSpeed={60}
        />
      </div>
      <div className="text-lg text-neutral-400">
        <TypewriterText
          words={[
            "Building amazing user interfaces...",
            "With beautiful animations...",
            "That stand out from the crowd.",
          ]}
          typingSpeed={50}
          deletingSpeed={30}
          delayBetweenWords={2000}
        />
      </div>
    </div>
  );
}

Props

Prop	Type	Description
`theme`	`"light" \| "dark"`	Visual theme; light or dark. Default: dark.
`words`	`string[]`	An array of words or phrases to be typed out sequentially.
`className`	`string`	Add CSS classes to the text container.
`cursorClassName`	`string`	Add CSS classes to customize the blinking cursor span.
`typingSpeed`	`number`	Delay in milliseconds between typing each character.
`deletingSpeed`	`number`	Delay in milliseconds between deleting each character.
`delayBetweenWords`	`number`	Pause duration before erasing a completed word to type the next.
`loop`	`boolean`	Whether the typewriter sequence should repeat infinitely.
`cursor`	`boolean`	Controls the visibility of the blinking cursor at the end of the text.