Getting Started
Components
Device Mocks
Special Effects
Animations
Text Animations
Buttons
Word
import { WordRotate } from "@/registry/magicui/word-rotate";
export function WordRotateDemo() {
return (
<WordRotate
className="text-4xl font-bold text-black dark:text-white"
words={["Word", "Rotate"]}
/>
);
}
Installation
pnpm dlx shadcn@latest add @magicui/word-rotate
Usage
import { WordRotate } from "@/components/magicui/word-rotate";
<WordRotate words={["Word", "Rotate"]} />
Props
Prop | Type | Default | Description |
---|---|---|---|
className | string | - | The class name to be applied to the component |
duration | number | 2500 | Duration of the animation |
words | string[] | "" | An array of words to rotate through |
motionProps | HTMLMotionProps | {} | An object containing motion animation props |
Limited Time Offer
Ship Faster with Magic UI ProMagic UI Pro
Stop building from scratch.
Get 8 production-ready templates and 50+ premium components that your users will love.
✓
Next.js 15 + TypeScript ready✓
Copy, paste, customize in minutes✓
Save 100+ hours of development