Typography

Typewriter

Typewriter text effect for React and shadcn/ui that types a phrase, then loops rotating words with a blinking cursor.

Updated Oct 1, 2026

iMessage

Today 11:29

Hey!

Whats up bretheren?!

Delivered

Typewriter is a React text component for shadcn/ui built with Motion. Use it for landing page headlines, hero taglines, or AI product intros.

Installation


pnpm dlx shadcn@latest add @cult-ui/typewriter

Usage


const texts = [
  "Testing 124",
  "Look at newcult.co",
  "and check gnow.io",
  "Sick af",
];
 
export default function TypewriterDemo() {
  return (
    <IosOgShellCard>
      <div className="ml-auto px-4 py-2 mb-3 text-white bg-blue-500 rounded-2xl">
        <p className="text-sm md:text-base font-semibold text-base-900 truncate">
          <Typewriter texts={texts} delay={1} baseText="Yo " />
        </p>
      </div>
    </IosOgShellCard>
  );
}