Word Rotate

A list of words that cycle with slide, flip, or fade transitions — the signature hero-headline effect used across modern SaaS sites.

UniqueUI CLI

npx uniqueui add word-rotate

shadcn CLI

npx shadcn@latest add https://uniqueui.com/r/word-rotate.json -y

shadcn path expects @/lib/utils (run shadcn init first). Same source file is installed to components/ui/.

Preview

Build interfaces that are faster

slide-up

React

slide-down

React

flip

React

fade

React

Usage

"use client";
import { WordRotate } from "@/components/ui/word-rotate";

export default function Hero() {
  return (
    <h1 className="text-5xl font-black text-white">
      Build interfaces that are{" "}
      <WordRotate
        words={["faster", "smarter", "bolder", "yours"]}
        animation="slide-up"
        className="text-purple-400"
      />
    </h1>
  );
}

Props

Prop	Type	Description
`words`	`string[]`	Array of words to cycle through.
`interval`	`number`	How long each word is shown in ms.
`animation`	`"slide-up" \| "slide-down" \| "flip" \| "fade"`	Transition style between words.
`className`	`string`	Extra Tailwind classes (font size, colour, etc.).
`theme`	`"light" \| "dark"`	Theme context.