Typewriter

Text 664

About

a fully-featured typewriter component with typing and word-changing effects!

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Typewriter to your project and fits it to your theme.

Code

How Typewriter is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Typewriter } from "@/components/ui/typewriter";

export default function DemoOne() {
  const words = ["Welcome to Typewriter", "Create beautiful effects", "With React & Tailwind", "Type away!"]

  return (
    <main className="flex items-center justify-center min-h-screen">
      <div className="text-center">
        <h1 className="text-5xl font-bold mb-8">
          <Typewriter words={words} speed={80} delayBetweenWords={2000} cursor={true} cursorChar="|" />
        </h1> 
      </div>
    </main>
  )
}