Aurora Background
A subtle Aurora or Southern Lights background for your website.
Installation
Run the following command
npx shadcn@latest add @aceternity/aurora-background
Add animations for Tailwind CSS
@import "tailwindcss";
@theme inline {
--animate-aurora: aurora 60s linear infinite;
@keyframes aurora {
from {
background-position:
50% 50%,
50% 50%;
}
to {
background-position:
350% 50%,
350% 50%;
}
}
}
Props
Prop | Type | Default | Description |
---|---|---|---|
children | ReactNode | N/A | The content to be displayed within the AuroraBackground component. |
className | string | N/A | Additional CSS classes to apply to the component for styling. |
showRadialGradient | boolean | true | Determines whether a radial gradient effect is applied to the background. |
...props | object | N/A | Any other props that should be passed to the div element of the component. |
This component is ideated and initialized by Akshith Pottigari
Build websites faster and 10x better than your competitors with
Aceternity UI Pro
Next.js 15, Tailwind CSS v4 and Motion for react powered templates
70+ templates and component blocks combined
Ready to copy paste component blocks, save days of development time

