Typing Text

Typewriter effect with blinking cursor

$ npx @hritik-sharmaa/repeat-ui add text-effect-typing-text
Category
Text Effect
Added
Aug 14, 2025
Version
2.0.0
Packages
motion
Flavors
TS · JS · Tailwind · CSS
Live preview
_
Customize
80ms
30ms
1000ms
36px
import TextEffectTypingText from "@/components/repeat-ui/text-effect-typing-text/preview";

<TextEffectTypingText text="Best component library for Next.js." character="_" />

Installation

  1. Run the command

    Adds the files and installs any packages they need. Works with npm, pnpm, yarn and bun.

    $ npx @hritik-sharmaa/repeat-ui add text-effect-typing-text --variant ts-tailwind

  2. Use it

    The files are in components/repeat-ui/text-effect-typing-text/.

    import TextEffectTypingText from "@/components/repeat-ui/text-effect-typing-text/preview";

export default function Page() {
  return <TextEffectTypingText />;
}

Props

PropTypeDefaultDescription
textstring"Best component library for Next.js."The text to type.
speednumber80Milliseconds per typed character.
deleteSpeednumber30Milliseconds per deleted character.
pauseAfterCompletenumber1000Milliseconds to wait before deleting.
delaynumber0Milliseconds before typing starts.
characterstring"_"The cursor character.
cursorColorstring"#3b82f6"Cursor colour while typing.
deleteColorstring"#ef4444"Cursor colour while deleting.
fontSizenumber36Text size in pixels.
showLetterAnimationbooleantrueFade each letter in as it appears.
onComplete() => void-Called when the text is fully typed.
onDeleteComplete() => void-Called when the text is fully deleted.
classNamestring""Extra classes for the root element.

More text effect

See all
Flipping TextText that flips between different words
Flow TextSmooth flowing text animation
Pop TextText that pops with scale animations