Browse components
Typewriter
Types and deletes a list of phrases with a blinking cursor.
Build faster., Ship prettier., Copy. Paste. Done.
Installation
npx shadcn@latest add @glint-ui/typewriterFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/typewriter.json
Usage
import { Typewriter } from "@/components/ui/typewriter";
<Typewriter words={["Build faster.", "Ship prettier."]} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| words | string[] | ["Build faster.","Ship prettier.","Copy. Paste. Done."] | Phrases to type. |
| typeSpeed | number | 70 | Ms per typed character. |
| deleteSpeed | number | 40 | Ms per deleted character. |
| pause | number | 1500 | Ms to hold a finished phrase. |
| cursor | string | "|" | Cursor glyph. |
| className | string | — | Extra classes for the root element. |