Skip to main content

Installation

    Examples

    Basic Usage

    Multiple Words with Loop

    Custom Speed

    Start on View

    Without Cursor

    Single Play (No Loop)

    Cursor Blinking

    Cursor Styles

    Usage

    showLineNumbers
    import { TypingAnimation } from "@/components/ui/typing-animation"
    
    showLineNumbers
    <TypingAnimation>Hello World! 👋</TypingAnimation>
    

    Props

    PropTypeDefaultDescription
    childrenstring-Single string to animate
    wordsstring[]-Array of strings to type and delete in sequence
    classNamestring-The class name to be applied to the component
    durationnumber100Duration for each character
    typeSpeednumber100Speed of typing animation (ms per character)
    deleteSpeednumber50Speed of deleting animation (ms per character)
    delaynumber0Delay before animation starts (in ms)
    pauseDelaynumber1000Pause duration between words (in ms)
    loopbooleanfalseWhether to loop the animation
    asReact.ElementType"span"Component to render as
    startOnViewbooleantrueStart animation when component is in view
    showCursorbooleantrueWhether to show the typing cursor
    blinkCursorbooleantrueWhether the cursor should blink
    cursorStyle"line" | "block" | "underscore""line"Style of the cursor (like VSCode)

    Build docs developers (and LLMs) love