Creators may embed this optional badge in a repository or project page. It points directly to this product; no backlink is required, and the supplied link is nofollow by default.
Related products
More production-ready assets in the same category.
A premium "cutout corner" brand/feature card with an autoplaying muted looping video media band, a notched inset label, a corner badge, a 2x2 feature grid and a CTA. Drop-in, dark-mode and reduced-motion friendly, lucide-react only.
A premium animated-gradient button with a bright light orbiting the edge, four variants, five sizes, loading/disabled states and an under-glow — self-installing keyframes (no tailwind.config edits), accessible, zero required props.
React
React 19
TypeScript
Aurora Button is a premium animated-gradient button for React 19 + TypeScript + Tailwind CSS. A bright light orbits the edge over an elevated surface (CSS transform animation — visible in every browser and on any background). Self-installing: it injects its own keyframes once on mount, so there are no tailwind.config or global CSS edits. Palette via --ab-1…--ab-5 tokens with premium defaults; rebrand any button inline. Four variants (gradient / inverted / outline / solid / ghost) and five sizes including icon. Built-in loading state with spinner + aria-busy, disabled, focus-visible ring and active press; asChild (Radix Slot) renders it as a link; prefers-reduced-motion pauses all motion. Strict TypeScript, accessible (WCAG AA).
A premium frosted-glass article card with an animated orbiting gradient border, serif display headline, dark mode and full WCAG AA accessibility — drop-in, zero required props.
React
React 19
TypeScript
Aurora Glass Card is a single-file React 19 + Tailwind component: a luxury glassmorphism article/blog card with an animated conic-gradient border that orbits the edge and intensifies on hover and keyboard focus. Fully themeable via CSS variable tokens, accessible by construction (stretched-link pattern, visible focus ring, aria-pressed save, prefers-reduced-motion), with graceful image and avatar fallbacks and a refined serif headline. Zero required props — drop it in and it renders beautiful defaults.
A premium split sign-in card (form + cover image) with a light orbiting the outside edge, password reveal, social providers, dark mode and WCAG AA — drop-in, framework-agnostic, zero required props.
What is this component?
Aurora Sign-In Card is a premium, framework-agnostic split login/sign-in card for React 19 + TypeScript + Tailwind CSS. A subtle light orbits the outside edge (CSS transform animation — visible in every browser), the body stays opaque so nothing bleeds inside, and the gradient submit button has a sweeping sheen on hover. Includes a password show/hide toggle, remember-me, forgot-password, and a swappable social-provider row (GitHub / email link / passkey). Real form semantics with stable field names work with any auth SDK or server action. Fully tokenised via CSS variables, dark by default and light-ready, accessible (labelled fields, visible focus, prefers-reduced-motion). No next/image and no brand-logo SVGs — original and license-clean. Single file, default export, lucide-react the only dependency.
What's included
Source code
Documentation
Dark mode
TypeScript types
Free updates
Requirements
So it renders exactly like the preview.
1. Install dependencies
npm install lucide-react
Details
React
React 19
TypeScript
Tailwind CSS
Login
Sign in
Auth UI
Authentication
Dark mode
Accessible
lucide-react
Category
Forms & Inputs
Framework
React
Styling
Tailwind CSS
Updated Jun 30, 2026
Dark mode
Included
Accessibility
WCAG AA
TypeScript
Yes
Dependencies (npm)
lucide-react
Security scanclean
MaintainedYes
Computed from real data — the same states coding agents read in this product's manifest.