Beautiful 
accessible 
Modern UI 

Typewriter Effect Component

An animated typewriter effect component that simulates typing text, with configurable speed and behavior.

  • Smooth typing animation effect
  • Customizable typing speed and delay
  • Support for multiple text strings with cycling
  • Optional cursor with blinking effect

Installation

The Typewriter Effect component is part of our UI library. You can import it directly from the components directory.

Usage

Here is how to use the Typewriter Effect component in your project.

React TSX
1import { TypewriterEffect } from "@/components/modern-ui/typewriter-effect"

React TSX
1<TypewriterEffect 
2  words={[
3    { text: "Hello, World!" }
4  ]}
5/>

Examples

Default Typewriter Effect

 
 

API Reference

TypewriterEffect

Properties

PropertyTypeDefaultDescription
words{ text: string, className?: string }[][]Array of word objects, each with text content and optional className
classNamestring-Additional CSS classes for the component
cursorClassNamestring-Additional CSS classes for the cursor

TypewriterEffectSmooth

Properties

PropertyTypeDefaultDescription
words{ text: string, className?: string }[][]Array of word objects, each with text content and optional className
classNamestring-Additional CSS classes for the component
cursorClassNamestring-Additional CSS classes for the cursor