Text Rotate React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Pro item: the CLI needs a Pro account. See plans

Usage

Import TextRotate from @/components/ui/text-rotate.

import { TextRotate } from "@/components/ui/text-rotate"

export function Hero() {
  return (
    <h1 className="text-5xl font-semibold tracking-tight">
      Ship <TextRotate words={["faster", "smarter", "together"]} tone="brand" highlight="pill" />
    </h1>
  )
}

// Letter by letter with a 3D flip:
// <TextRotate words={["design", "build", "launch"]} effect="flip" by="char" />

Props

• wordsdefault "["faster", "smarter", "together"]"
  string[]

  The words or short phrases to cycle through, in order. A single word just sits still.

• intervaldefault 2500
  number

  Milliseconds each word stays on screen before the next one comes in.

• effectdefault "slide-up"
  "slide-up" | "slide-down" | "fade" | "blur" | "flip"

  How words swap. Slides and the 3D flip move on a snappy spring; fade and blur cross-fade on a smooth one.

• bydefault "word"
  "word" | "char"

  word swaps the whole word at once; char staggers its letters in and out.

• staggerdefault 25
  number

  With by="char", milliseconds between one letter and the next.

• tonedefault "inherit"
  "inherit" | "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Color of the rotating word. inherit keeps the color of the sentence around it; the tones use the readable soft-foreground shade.

• colordefault ""
  string

  Any CSS color for the rotating word and its highlight. Replaces the tone. Leave empty to use the tone.

• highlightdefault "none"
  "none" | "underline" | "pill"

  Decoration behind the word that resizes with it: a soft underline, or a rounded pill tinted with the tone.

• pauseddefault false
  boolean

  Stops the timer and keeps the current word. Changing index still swaps words.

• loopdefault true
  boolean

  Starts over after the last word. Turn it off to stop on the last one, for a sentence that settles.

• pauseOnHoverdefault false
  boolean

  Holds the current word while a mouse is over it or keyboard focus is inside it.

• asdefault "span"
  "span" | "div"

  The root element. span sits inline in a sentence; div for a word on its own line.

• defaultIndexdefault 0
  number

  The word shown first when the rotation runs on its own.

• index
  number

  The shown word, for a controlled rotation. Pair it with onIndexChange; the timer still asks for the next index.

• onIndexChange
  (index: number) => void

  Called with the next index whenever the word changes, from the timer or from outside.

• classNames
  Partial<Record<"word" | "char" | "highlight", string>>

  Extra classes for the rotating word, each letter in char mode, and the highlight box around it.

• className
  string

  Extra classes for the root element.

• ref
  Ref<HTMLElement> (a useRef object or an (el) => void callback)

  The root element.

Parts

FAQ

More React effect components