Usage
import { AuroraBackground } from "@/registry/components/aurora-background/aurora-background";
<AuroraBackground>Label</AuroraBackground>Props
| Prop | Type | Default | Description |
|---|---|---|---|
children? | ReactNode | ||
colors? | string[] | ["oklch(72% .17 280)", "oklch(78% .14 200)", "oklch(80% .13 340)", "oklch(84% .12 90)"] | Three or more colors for the bands. |
speed? | number | 18 | Seconds per drift cycle. |
blur? | number | 48 | Blur radius of the bands, px. |
fade? | boolean | true | Fade the aurora out toward the bottom. |
Also accepts every prop of HTMLAttributes<HTMLDivElement>.
When to use
Soft ambient backgrounds for heroes and empty states.
When not to use
Behind dense text without a contrast layer.