Typewriter

Types phrases character by character, erases them and types the next, with a blinking caret.

Dependenciesmotion

$ npx shadcn@latest add @balick/hero-01, npx shadcn@latest add @balick/pricing-01

Installation#

pnpm dlx shadcn@latest add @balick/typewriter

Or pass the full URL: https://ui.balick.me/r/typewriter.json

Usage#

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

export function Prompt() {
  return <Typewriter text={["Build a landing page", "Add a pricing table"]} />
}

Props#

Prop	Type	Default	Description
`text` A phrase, or phrases typed one after the other. Required.	`string \| string[]`	—	A phrase, or phrases typed one after the other. Required.
`speed` Time to type one character, in milliseconds.	`number`	45	Time to type one character, in milliseconds.
`deleteSpeed` Time to erase one character, in milliseconds.	`number`	25	Time to erase one character, in milliseconds.
`pause` Time a finished phrase stays before it is erased, in milliseconds.	`number`	1800	Time a finished phrase stays before it is erased, in milliseconds.
`loop` Start over after the last phrase.	`boolean`	true	Start over after the last phrase.
`caret` Show a blinking caret.	`boolean`	true	Show a blinking caret.