Text whose letters roll forward like little cubes, one after another in a wave that loops without a seam.
Set your access key from API keys as NEXTUI_TOKEN in .env.local and add the @nextui namespace below to components.json once. Then every item installs by name. Each install counts as a copy on a free account.
$pnpm dlx shadcn@latest add @nextui/flip-text
1{2"registries": {3"@nextui": {4"url": "https://nextui.dev/r/{name}.json",5"headers": { "Authorization": "Bearer ${NEXTUI_TOKEN}" }6}7}8}
1import { FlipText } from "@/components/nextui/flip-text";23export function Headline() {4return (5<h2 className="text-5xl font-bold tracking-tight">6<FlipText>Small things</FlipText>7</h2>8);9}
| Prop | Type | Default | Description |
|---|---|---|---|
| children | string | – | The text to split into rolling letters |
| duration | number | 2.2 | Length of one roll cycle, in seconds; the turn takes the first quarter |
| delay | number | 0 | Wait before the first roll, in seconds |
| loop | boolean | true | Keep rolling forever, or roll once |
| together | boolean | false | Roll every letter at once instead of as a wave |
| className | string | – | Extra classes on the wrapper; font size and colour pass through to the letters |
Sign in to see the code
Preview it freely. A free account copies code and prompts a few times a day.