Aurora Card
Aurora-blur pricing card with a configurable hero area, layout hooks, and customizable shader controls.
Installation
Pro components require registry authentication. Add your Unlumen UI Pro key as UNLUMEN_LICENSE_KEY in your .env.local file and follow the setup guide.
File Structure
aurora-blur.tsx
aurora-card.tsx
Usage
import { AuroraCard } from "@/components/unlumen-ui/aurora-card";
export default function Example() {
return <AuroraCard />;
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
header? | React.ReactNode | - | Optional node rendered in the card header region. |
children? | React.ReactNode | - | Card body content rendered below the header. |
headerHeight? | number | 224 | Minimum header height in pixels. |
layers? | AuroraLayer[] | - | Aurora color/speed/intensity layers passed to AuroraBlur. |
skyLayers? | SkyLayer[] | - | Sky gradient layers used behind the aurora effect. |
auroraProps? | AuroraBlurProps | - | Additional AuroraBlur controls excluding layout props. |
cardClassName? | string | - | Classes for the card shell. |
contentClassName? | string | - | Classes for the content wrapper. |
headerClassName? | string | - | Classes for the header container. |
bodyClassName? | string | - | Classes for the body container. |
auroraWrapperClassName? | string | - | Classes for the absolute aurora wrapper. |
auroraClassName? | string | - | Classes for the AuroraBlur element. |
overlayClassName? | string | - | Classes for the overlay layer above aurora. |
borderClassName? | string | - | Classes for the decorative border layer. |
className? | string | - | Additional classes on the outer wrapper. |
Credits
Built by leo.
Keep in mind
Most components on this site are inspired by or recreated from existing work across the web. I'm not here to take credit; just to learn, experiment, and sometimes push things a bit further. If something looks familiar and I forgot to mention you, reach out and I'll fix that right away.