Premium & Brand

Typing Text

A typewriter that types one or more phrases with a blinking caret.

Import

tsx

import { TypingText } from "@cronus-ui/ui";

bash

npx cronus-ui add typing-text

Types, pauses, deletes, and moves to the next phrase. Reduced-motion visitors see the first phrase in full.

tsx

<TypingText
  className="font-display text-3xl text-fg"
  text={["Design systems.", "Product surfaces.", "Copy you can upgrade."]}
/>

Generated from the component's exported types.

Extends Omit<HTMLAttributes<HTMLSpanElement>, "children">

Prop	Type	Default	Description
`ref`	`Ref<HTMLSpanElement>`	—	—
`text`*	`string \| string[]`	—	Phrases to type. A single string is treated as one phrase. When more than one is provided the component types, pauses, deletes, and moves on.
`typingSpeed`	`number`	`50`	Milliseconds per typed character.
`deletingSpeed`	`number`	`30`	Milliseconds per deleted character.
`pause`	`number`	`1400`	Milliseconds to rest on a finished phrase before deleting.
`loop`	`boolean`	—	Loop back to the first phrase after the last. Defaults to `true` when more than one phrase is provided.
`reducedMotion`	`TypingTextMotionPreference`	`"respect"`	How `prefers-reduced-motion` is honoured. Defaults to `"respect"` (show the current phrase in full). `"always"` forces the typewriter; `"never"` always shows the first phrase statically.