Getting Started
Blocks
Components
Device Mocks
Special Effects
Animations
Text Animations
Buttons
import { RainbowButton } from "@/registry/magicui/rainbow-button";
export function RainbowButtonDemo() {
return <RainbowButton>Get Unlimited Access</RainbowButton>;
}
Installation
pnpm dlx shadcn@latest add @magicui/rainbow-button
Examples
Outline Variant
import { RainbowButton } from "@/registry/magicui/rainbow-button";
export function RainbowButtonDemo() {
return <RainbowButton variant="outline">Get Unlimited Access</RainbowButton>;
}
Usage
import { RainbowButton } from "@/components/magicui/rainbow-button";<RainbowButton>Rainbow Button</RainbowButton>Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | The content to be displayed inside the button. |
className | string | - | Additional CSS classes to be applied to the button. |
variant | "default" | "outline" | "default" | The variant of the button. |
size | "default" | "sm" | "lg" | "icon" | "default" | The size of the button. |
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