Aurora Border Card
Modern card with a continuously flowing animated gradient border and live glow themes.
On This Page
Modern card with a continuously flowing animated gradient border and live glow themes.
A modern, state-of-the-art card featuring continuously flowing Aurora Borealis gradient waves. Autonomous on mount without requiring hover, with high-vibrancy chromatic waves and customizable live props.
Visible flowing chromatic aurora bands
Aurora, Ocean, Sunset, Forest & more
Change text, titles, speed & glow
Pure white light & deep obsidian dark
Build stunning interfaces with premium animated components.
Complete list of properties and customization options available for AuroraBorderCard.
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "aurora" | "ocean" | "sunset" | "forest" | "cyber" | "gold" | "mono" | "aurora" | Color palette theme for the continuously circulating animated gradient border. |
| speed | "slow" | "normal" | "fast" | "normal" | Cycle duration: slow (8s), normal (4.5s), fast (2.5s). |
| glow | "subtle" | "medium" | "strong" | "none" | "medium" | Intensity of the ambient luminous glow diffusing around the card perimeter. |
| borderWidth | 1 | 2 | 3 | number | 2 | Stroke thickness of the animated border in pixels. |
| radius | "sm" | "md" | "lg" | "xl" | "xl" | Corner curvature: sm (rounded-xl), md (rounded-2xl), lg (rounded-3xl), xl (rounded-[2rem]). |
| animation | "flow" | "wave" | "pulse" | "flow" | Motion style: flow (360° perimeter wave rotation), wave (linear wave shift), pulse (breathing luminance). |
| title | string | "Beautiful Components" | Heading text rendered in the card header. |
| subtitle | string | "For Modern Builders" | Gradient subtitle rendered beneath the heading. |
| description | string | "Build stunning interfaces with premium animated components." | Body copy rendered in default content mode. |
| badgeText | string | "NexoreUI" | Text for the top badge. |
| buttonText | string | "Get Started" | Text for the call-to-action button. |
| children | React.ReactNode | undefined | Custom content rendered inside the card surface. If omitted, default showcase content is rendered. |
| className | string | — | Additional CSS classes applied to the outer container. |
Explore responsive implementation patterns across AI features and SaaS pricing tiers.
Hero showcase card for highlighting state-of-the-art AI agent capabilities.
Synthesize multi-modal workflows with continuous real-time reasoning and deterministic tool orchestration.
import { AuroraBorderCard } from "nexoreui";
import { Bot, ArrowRight } from "lucide-react";
export default function FeatureCard() {
return (
<AuroraBorderCard variant="aurora" speed="normal" glow="medium" radius="xl" borderWidth={2}>
<div className="flex flex-col gap-6">
<div className="flex items-center justify-between">
<span className="text-xs font-semibold text-primary">Next-Gen Agent</span>
<span className="text-xs text-zinc-500">v2.4.0</span>
</div>
<h4 className="text-2xl font-bold">Autonomous Intelligence</h4>
<button className="w-full py-2.5 rounded-xl bg-primary text-white">
Launch Pipeline →
</button>
</div>
</AuroraBorderCard>
);
}Highlighted pricing card with vibrant Sunset gradient to maximize conversion.
Everything modern engineering teams need to scale.
import { AuroraBorderCard } from "nexoreui";
import { ShieldCheck } from "lucide-react";
export default function PricingCard() {
return (
<AuroraBorderCard variant="sunset" speed="normal" glow="strong" radius="xl">
<div className="flex flex-col gap-6">
<span className="text-xs font-bold uppercase text-orange-500">Most Popular</span>
<div className="flex items-baseline gap-1">
<span className="text-4xl font-extrabold text-white">$49</span>
<span className="text-sm text-zinc-400">/ month</span>
</div>
<button className="w-full py-2.5 rounded-xl text-xs font-semibold text-white bg-gradient-to-r from-orange-500 to-primary">
Upgrade to Pro
</button>
</div>
</AuroraBorderCard>
);
}