Aurora Card

Aurora-blur pricing card with a configurable hero area, layout hooks, and customizable shader controls.

Installation

CLI installation is not available for Pro components. I'm on it.

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

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.