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 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.
React
React 19
TypeScript
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.
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 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.
What is this component?
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).
What's included
Source code
Documentation
Dark mode
TypeScript types
Free updates
Details
React
React 19
TypeScript
Tailwind CSS
Button
Gradient button
cva
shadcn
Dark mode
Accessible
lucide-react
Category
Buttons
Framework
React
Styling
Tailwind CSS
Dark mode
Included
Accessibility
WCAG AA
TypeScript
Yes
Updated Jun 30, 2026
Security scanclean
MaintainedYes
Computed from real data — the same states coding agents read in this product's manifest.