All components
Aurora Background
Background EffectsA container with a slowly drifting aurora gradient behind its content.
Aurora
Installation
Add it with the shadcn CLI:
$
pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/aurora-background.jsonOr install manually
1. Install dependencies
pnpm add motion clsx tailwind-merge2. Copy the component source into
components/library/aurora-background.tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | Content shown above the gradient. |
| className | string | - | Classes applied to the container. |
Accessibility
- The gradient layer is aria-hidden and purely decorative.
- Content sits in its own stacking context above the blur.
- Slow rotation avoids the flicker fast gradients can cause.
Dependencies
motionclsxtailwind-merge