Aurora Panel

Cards 36

About

A product card with an animated aurora sky rendered on canvas in its roof, with drifting light ribbons, seeded grain, and stars that lean toward the pointer.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Aurora Panel to your project and fits it to your theme.

Code

How Aurora Panel is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { AuroraPanel } from "@/components/ui/aurora-panel";

export default function AuroraPanelDemo() {
  return (
    <div className="flex w-full items-center justify-center p-10">
      <AuroraPanel className="max-w-sm">
        <h3 className="text-base font-semibold text-[var(--color-fg,#f8fafc)]">
          Nightwatch Pro
        </h3>
        <p className="mt-1 text-sm text-[var(--color-fg-secondary,#cbd5e1)]">
          Ambient monitoring for your production fleet, with real-time alerts
          and drift-free uptime tracking.
        </p>
      </AuroraPanel>
    </div>
  );
}