Click it and type.

Preview

Click it and type

Props

Text

Enamel

Speed12 / s

Jitter0.30

Columns32

Humanize

Uneven keys, rests after punctuation

Loop

Pull the sheet out and type it again

Interactive

Type on it, or click its keys

Sound

Key clicks, bell, and return

Installation

pnpm dlx shadcn@latest add @23rd/typewriter

Or from the public GitHub registry:

pnpm dlx shadcn@latest add radiumcoders/23rd.dev/typewriter

Usage

Give the parent a size; the machine scales to fit.

"use client"

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

export function Letter() {
  return (
    <div className="h-96 w-full overflow-hidden rounded-xl border">
      <Typewriter text={"Dear reader,\nthe ribbon is fresh."} />
    </div>
  )
}

\n breaks a line; text wraps at columns characters.

<Typewriter loop={false} onDone={() => console.log("typed")} />
<Typewriter color="#D2463A" speed={8} columns={40} sound />

sound only plays after the visitor has clicked or pressed a key on the page.

Props

Prop	Type	Default
`color`	`string`	`"#8EC3B5"`, body enamel
`text`	`string`	a short letter
`speed`	`number`	`12`, characters per second
`humanize`	`boolean`	`true`, uneven rhythm
`jitter`	`number`	`0.3`, 0–1
`columns`	`number`	`32`, 16–60
`loop`	`boolean`	`true`
`hold`	`number`	`2600`, ms before looping
`startDelay`	`number`	`600`, ms
`sound`	`boolean`	`false`
`interactive`	`boolean`	`true`
`label`	`string`	none, nameplate text
`onDone`	`() => void`	fires when the last character lands
`className`	`string`	React only
`class`	`string`	Svelte only