Velora UI

Typewriter

Types, holds and deletes through a list of words.

  • 1.3 KB gzipped
  • Deps: motion/react
  • Reduced-motion safe
  • Base UI & Radix compatible
Open in v0

Preview

Build it faster., smoother., free.

Installation

pnpm dlx shadcn@latest add https://velora.colorlib.com/r/typewriter.json

Adds components/velora/typewriter.tsx, installs motion.

Props

PropTypeDefault
words*string[]—
typeSpeed

ms per typed character

number70
deleteSpeed

ms per deleted character

number40
holdTime

ms to hold a completed word

number1800
loopbooleantrue
cursorbooleantrue

Also accepts every <span> attribute, forwarded to the root element.

Accessibility

Reduced motion
The first word shows as static text with no typing, deleting or cursor. With motion allowed, typing pauses while the pointer is over the text or focus is inside it.
Keyboard
Decorative — nothing to operate.
Screen readers
All words are exposed once, comma-separated, in an sr-only span; the typed text and cursor are aria-hidden.