text

TypeWriter

Character-by-character text reveal with an optional blinking cursor. Ideal for hero headlines, terminal-style UIs, and code-typing effects.

v1.0.0react >=18next >=14tailwind >=4

texttypewritertypingcursorrevealhero

Preview

Loading preview...

Props

Prop	Type	Default	Description
`text*`	`string`	`—`	The text string to type out character-by-character
`speed`	`number`	`50`	Typing speed in milliseconds per character
`cursor`	`boolean`	`true`	Show a blinking cursor at the typing position
`cursorChar`	`string`	`\|`	Character used for the cursor
`loop`	`boolean`	`false`	Restart typing from the beginning after completion
`delay`	`number`	`0`	Delay in milliseconds before typing starts
`className`	`string`	`—`	Additional Tailwind classes
`id`	`string`	`—`	HTML id attribute

Slots

Slot	Type	Required	Description
`text`	`string`	Yes	The text content rendered character-by-character via the text prop

Layout

Display: inline

Responsive: No

Renders as an inline span. Fits naturally inside headings, paragraphs, or other inline contexts.

Examples

Basic hero headline

<TypeWriter text="Build beautiful interfaces" />

Terminal style with custom cursor

<TypeWriter
  text="$ npm install @ui-universe/ui"
  speed={30}
  cursorChar="_"
  className="font-mono text-green-400"
/>

Looping tagline

<TypeWriter
  text="Design. Build. Ship."
  speed={80}
  loop
  delay={500}
/>

Slow dramatic reveal

<h1 className="text-6xl font-bold">
  <TypeWriter text="The future of UI" speed={120} />
</h1>

AI Usage Hint

Use TypeWriter for hero headlines, terminal-style text, or code-typing effects. Set speed for typing rate. Enable loop for repeating demonstrations. Pair with GradientText to type colorful text. Works as inline span so it can sit inside any heading element.

Works Well With

GradientTextFadeUp