Rotating Text

Cycles through a list of strings with enter/exit motion; useful for hero lines, CTAs, and emphasis. Respects reduced motion and uses `aria-live` for screen readers.

Default

Inline rotating word inside a sentence.

Ship faster

default-example.tsx

1import { RotatingText } from "@/registry/ui";
2
3const WORDS = ["faster", "smarter", "together"] as const;
4
5export function RotatingTextDefaultExample() {
6  return (
7    <p className="text-muted-foreground text-center text-lg">
8      Ship{" "}
9      <RotatingText
10        items={WORDS}
11        intervalMs={2200}
12        className="font-semibold text-foreground"
13      />
14    </p>
15  );
16}

Highlighted phrase

Stronger styling on the rotating segment.

Design systems that feel alive

in-sentence-example.tsx

1import { RotatingText } from "@/registry/ui";
2
3export function RotatingTextInSentenceExample() {
4  return (
5    <p className="max-w-md text-center text-2xl font-medium tracking-tight">
6      Design systems that feel{" "}
7      <RotatingText
8        items={["alive", "effortless", "yours"]}
9        intervalMs={2800}
10        yOffset={8}
11        variant="highlight"
12      />
13    </p>
14  );
15}

Installation & source

Install via the shadcn CLI or copy the registry files manually.

bash

npx shadcn@latest add @tt-ui/rotating-text

Props

Name	Type	Default	Description
items	readonly string[]	Required	Strings to rotate through
intervalMs	number	2400	Delay between rotations in milliseconds
startIndex	number	0	Initial index into items
yOffset	number	12	Vertical slide distance in px (disabled when reduced motion is preferred)
motionTransition	Transition	-	Optional Motion transition override
variant	"default" \| "highlight"	"default"	Visual style variant for the rotating segment
className	string	-	Applied to the outer wrapper span