Getting Started
Components
Device Mocks
Special Effects
Animations
Text Animations
Buttons
Flip Text
import { FlipText } from "@/registry/magicui/flip-text";
export function FlipTextDemo() {
return (
<FlipText className="text-4xl font-bold -tracking-widest text-black dark:text-white md:text-7xl md:leading-[5rem]">
Flip Text
</FlipText>
);
}
Installation
pnpm dlx shadcn@latest add @magicui/flip-text
Usage
import { FlipText } from "@/components/magicui/flip-text";
<FlipText>Flip Text</FlipText>
Props
Prop | Type | Default | Description |
---|---|---|---|
className | string | - | The class name to be applied to the component |
duration | number | 0.5 | Duration of the animation |
delayMultiple | number | 0.08 | Transition delay multiplier. |
variants | Variants | {} | An object containing motion variants |
as | ElementType | span | The element type of the component |
children | React.ReactNode | required | The children of the component |
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