Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Text

Free

Flip Words for React

Words that flip in place one after another, the next rising in letter by letter. For React with Base UI, when one word in a sentence should cycle through its options.

Framework

Flip Words swaps one word of a sentence for the next, again and again: the outgoing word lifts away, grows and blurs while the next one rises in letter by letter. It holds the width of its widest word, so the sentence around it never moves, and it pauses while the pointer is over it.

Use it for the one word of a headline that changes: what a product is for, who it's for, how it feels. To roll words up and down like a slot machine, use Rotating Text; to type them out, Typing Text; to animate the box around the word as well, Container Text Flip. A small timer counts the turns and CSS keyframe animations the install adds to your stylesheet move the letters, with no animation library; with reduced motion the words swap in place.

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Usage

import { FlipWords } from "@/components/ui/flip-words";
<p>
  Build <FlipWords words={["better", "faster", "beautiful"]} /> websites
</p>

Demos

Phrases

A word can be a few words. Every one is laid out in the same place, unseen, so the widest holds the space: in a centred heading the shorter ones sit in its middle.

Preview width

Timing

duration is how long each word stays, 3000 ms by default, and stagger the time between one letter coming in and the next, 40 ms.

Preview width

Accessibility

Screen readers read every word once, as a list (better, faster, beautiful), from a visually hidden copy; the flipping letters are hidden from them, so they never hear a word change mid-sentence. The words stop while the pointer is over them, for anyone reading slowly, and with reduced motion they swap without moving.

FAQ

Why is there space after a short word?

Flip Words holds the width of its widest word so the sentence never jumps as the words change. In centred text the space is shared on both sides; keep the words close in length for the tightest fit.

How do I colour the changing word?

Give it a className, such as text-primary font-semibold: the class applies to every word, and the rest of the sentence keeps its own style.

Does it pause?

Yes, while the pointer is over it, and it waits a full duration again once the pointer leaves. With a single word it never flips.

Which word comes first?

The first in words, from the moment the page shows; it rises in once, then the next takes its place after duration, round and round.

What do screen readers hear?

Every word once, separated by commas, in place of the changing word: "Build better, faster, beautiful websites".

What happens with reduced motion?

The words still change, each replacing the last in place, without rising, blurring or moving.

API Reference

FlipWords

<span> data-slot="flip-words"

PropType
wordsstring[]

The words, shown in turn from the first; a word may be a few words.

duration?number

How long each word stays, in milliseconds. @default 3000.

Default
3000
stagger?number

The time between one letter coming in and the next, in milliseconds. @default 40.

render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type
ReactElement | ((props: object, state: object) => ReactElement)
className?string

Merged with the part's classes.

AttributeType
data-turn?string
CSS variableType
--flip-words-staggerstring

The time between one letter coming in and the next (40ms).

--flip-words-xstring

How far the outgoing word drifts sideways (0.4em, mirrored for right-to-left text).

All 97 text effects