Getting Started
Blocks
Components
Device Mocks
Special Effects
Animations
Text Animations
Buttons
Ship beautifulbeautiful
import { AuroraText } from "@/registry/magicui/aurora-text";
export function AuroraTextDemo() {
return (
<h1 className="text-4xl font-bold tracking-tighter md:text-5xl lg:text-7xl">
Ship <AuroraText>beautiful</AuroraText>
</h1>
);
}
Installation
pnpm dlx shadcn@latest add @magicui/aurora-text
Usage
import { AuroraText } from "@/components/magicui/aurora-text";
<AuroraText>Aurora Text</AuroraText>
Props
Prop | Type | Default | Description |
---|---|---|---|
className | string | "" | The class name to be applied to the component |
children | ReactNode | - | Children elements |
colors | string[] | ["#FF0080", "#7928CA", "#0070F3", "#38bdf8"] | Array of colors used for the aurora effect |
speed | number | 1 | Animation speed multiplier (1 is default, 2 is twice as fast) |
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