Aurora
Mesmerizing northern lights effect for React applications. Create stunning landing pages with this free open source component featuring smooth CSS animations, TypeScript support, and Tailwind CSS integration.
Powered by
Installation
npx shadcn@latest add https://www.shadcn.io/registry/aurora-background.jsonnpx shadcn@latest add https://www.shadcn.io/registry/aurora-background.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/aurora-background.jsonbunx shadcn@latest add https://www.shadcn.io/registry/aurora-background.jsonConfigure animations for Tailwind CSS
Tailwind CSS v4
Add the aurora animation to your globals.css file:
@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%;
}
}
}Tailwind CSS v3
Add the aurora animation to your tailwind.config.js file:
const {
default: flattenColorPalette,
} = require("tailwindcss/lib/util/flattenColorPalette");
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
// your paths
"./src/**/*.{ts,tsx}",
],
darkMode: "class",
theme: {
extend: {
animation: {
aurora: "aurora 60s linear infinite",
},
keyframes: {
aurora: {
from: {
backgroundPosition: "50% 50%, 50% 50%",
},
to: {
backgroundPosition: "350% 50%, 350% 50%",
},
},
},
},
},
plugins: [],
};Features
- 60-second animation cycle with smooth, continuous movement using CSS transforms
- Automatic color synchronization with Tailwind CSS theme colors and CSS variables
- Performance optimized using hardware-accelerated CSS animations with zero JavaScript overhead
- TypeScript support with complete type definitions for reliable React development
- Responsive design that looks consistent across phones, tablets, and desktop displays
- shadcn/ui integration seamlessly working with modern design systems
- Radial gradient masking to focus attention on specific content areas
- Dark mode compatibility automatically adapting to light and dark themes
Examples
Animated Content
Full Background
Use Cases
This free open source React component works well for:
- Landing pages - Create memorable first impressions with animated aurora backgrounds built with Next.js
- Hero sections - Draw attention to main content with mesmerizing visuals using TypeScript
- Portfolio sites - Showcase creative work against animated backdrops using shadcn/ui design
- SaaS applications - Professional, modern visual design with Tailwind CSS integration
- Creative agencies - Express artistic vision through dynamic visual storytelling
- Tech presentations - Convey innovation and technology through JavaScript-powered backgrounds
Customization
Colors
The aurora effect uses CSS variables that sync with Tailwind color palette:
--blue-500,--indigo-300,--blue-300,--violet-200,--blue-400for aurora gradient--whiteand--blackfor overlay patterns
Animation Speed
Modify animation duration in your Tailwind config:
module.exports = {
theme: {
extend: {
animation: {
aurora: "aurora 30s linear infinite", // Faster animation
},
},
},
};API Reference
AuroraBackground
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Content to display over the aurora background |
showRadialGradient | boolean | true | Whether to apply radial gradient masking |
className | string | - | Additional CSS classes for the container |
...props | HTMLDivElement | - | All standard div props are supported |
Implementation Notes
- Component uses pure CSS animations with
background-positiontransforms for 60fps performance - No JavaScript calculations required - animations run entirely on CSS for better performance
- CSS variables automatically sync with Tailwind color palette
- Requires specific keyframe animations to be added to global CSS (provided in installation)
- Uses
will-change-transformfor hardware acceleration optimization - Automatically reduces animation for users who prefer minimal motion
- Compatible with shadcn/ui design system and responsive across all devices
- Radial gradient masking can be toggled via
showRadialGradientprop
AI Tool
Collapsible tool invocation display for React and Next.js AI applications. Built with Radix UI primitives, TypeScript support, and Tailwind CSS styling for professional tool execution status and parameter visualization.
Beams
Flowing energy streams that create organic movement patterns. These animated SVG paths bring life to static layouts with graceful gradient waves perfect for modern React applications.