Rebuilding the same buttons, modals and dashboards on every project is wasted time. A solid component pack gives you accessible, themeable building blocks so you focus on your product, not the primitives.
An interactive skewed grid background: cells light up in a palette color under the pointer and fade back over seconds, leaving a trail of light, with a radial mask blending the grid into your hero. Self-contained, framer-motion.
React 19
React
TypeScript
Background Boxes puts a living, perspective-skewed grid behind your hero content. As the pointer moves, each cell it passes snaps to a color from the palette and then fades back over a couple of seconds, leaving a trail of light. A radial mask fades the grid into the background at the edges so your text stays readable.
Ships two pieces: Boxes (the raw grid, memoized so parent re-renders never reshuffle the random cell colors) and BackgroundBoxes (a ready hero with the mask and a content slot). Self-contained CSS injected once (no Tailwind required); className merging via clsx + tailwind-merge. React 19 + TypeScript, prefers-reduced-motion aware. Original work for Assetzaar.
A premium 3D hero card: a floating Three.js character that follows the cursor — or drop in any Spline/GLB scene — beside a glass spotlight and your copy. Self-contained, accessible, reduced-motion aware.
React 19
React
TypeScript
Scene 3D is an interactive 3D hero for React 19 and TypeScript. Out of the box it renders an original Three.js character — a floating bot whose head and glowing eyes follow the cursor — next to a glass spotlight and your headline. It is the dependency-light way to add real, immersive 3D to a hero without wrestling a 3D pipeline.
Bring your own scene in two ways: set a Spline URL and it lazy-loads @splinetool/react-spline (and its runtime) only when used; or pass a .glb/.gltf model URL for the Three.js stage, with optional cursor-tracking pupils that work on any model (rigged or not) plus named-eye rotation for rigged characters. If a model fails to load it gracefully falls back to the built-in bot.
Self-contained CSS (injected once, no Tailwind), accessible copy, and prefers-reduced-motion aware (it calms the float/animation). Original work for Assetzaar. Core install needs three; add @splinetool/react-spline only if you use a Spline scene.
A macOS-style glass dock: icons magnify by pointer proximity (the classic fisheye) and push neighbours apart, with name tooltips, running-app dots and a click bounce. Pure React + CSS, keyboard-accessible, zero dependencies.
React 19
React
TypeScript
Glass Dock recreates the macOS dock for React 19 and TypeScript. Icons scale up based on how close the pointer is and gently push their neighbours apart — the classic dock fisheye — written straight to CSS variables on pointermove, so there are no re-renders and no dependencies. Hovering shows a name tooltip, "open" apps get a running-indicator dot, and clicking an icon bounces it.
It is fully self-contained: it injects its own CSS and an Apple-grade system font once on mount, needs no Tailwind, is keyboard accessible (focus magnifies too) and respects prefers-reduced-motion. No third-party app icons are bundled — pass your own via the apps prop, or use the original gradient tiles it ships with. Light and dark variants. Original work for Assetzaar.
An interactive team gallery: the panel under the pointer or keyboard focus expands while the others compress into vertical name tags, revealing role and social links. Pure-CSS magnify, accessible, self-contained.
React 19
React
TypeScript
Lineup is an interactive "bento" team gallery for React 19 and TypeScript. The panel under the pointer — or keyboard focus — smoothly expands while the others compress into slim columns with vertical name tags; the expanded panel reveals the person's name, role and social links, and the photo zooms subtly.
The magnify is pure CSS (no JS measuring), so it stays buttery and works on focus-within for keyboard users. It is fully self-contained: it injects its own CSS and a system font once on mount, ships with graceful avatar fallbacks (a generated gradient when a photo fails), respects prefers-reduced-motion, and is light by default with an optional dark theme. On small screens it stacks into expandable rows.
Drop in your own members (name, role, photo, socials) or use the bundled placeholders. Icons via lucide-react. Original work for Assetzaar.
A luxury multi-chain swap and bridge widget: token and network pickers with search, a cross-chain route pill, slippage settings, a rate / fee / price-impact / minimum-received breakdown and a glossy light-sweep CTA. Self-contained, accessible, zero dependencies. Prices and balances are example props — wire your own quotes.
React
React 19
TypeScript
Aurora Swap is a premium multi-chain token swap and bridge widget for React 19 and TypeScript, built from scratch with zero dependencies. It injects its own CSS and fonts once on mount, so it looks identical in any project with no Tailwind required. It includes token and network pickers with search, a spring-loaded direction switch, a luminous cross-chain route pill, slippage settings, and a full rate / price-impact / fee / minimum-received breakdown, plus a light-sweep CTA. Honesty first: token symbols are real but all prices and balances are EXAMPLE props — there are no live quotes and no on-chain calls. Wire your own quote source and wallet handlers (onSwap, onConnect) in production. Accessible (labelled controls, visible focus rings) and prefers-reduced-motion aware.
A premium split-flap (Solari) display board with realistic two-phase flap animation, character stepping, a per-column wave, multi-line support and full theming — self-contained, accessible, zero dependencies, zero required props.
React
React 19
TypeScript
Flip Board recreates the classic airport and train split-flap departure board for React 19 and TypeScript. Each character physically flips — the top leaf folds down while the new leaf falls into place — stepping through the charset to the target with a left-to-right wave. It is fully self-contained: it injects its own CSS and the JetBrains Mono web-font once on mount, so it renders identically in any project with no Tailwind or config required. Multi-line text is auto-centered into a stable grid so the board can flip between messages — perfect for cycling status text, marquees and hero displays. Everything is tokenized through CSS variables, so you can resize and recolor whole boards with a handful of properties. Accessible and battery-friendly: it exposes the text to screen readers (role=img with aria-label), respects prefers-reduced-motion, and cleans up its timers on unmount.
A 3D card that tilts toward the cursor and casts a soft "comet" glare that follows the pointer across its surface. Wrap any content; zero dependencies, reduced-motion aware. Composable CometCard wrapper + a ready-made invite demo.
An interactive 3D card that tilts toward your cursor with CSS perspective, while inner items lift on the Z axis (translateZ) for real depth. Zero dependencies, dark mode, and tilt disabled under reduced-motion. Composable CardContainer / CardBody / CardItem API.
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 light-rain background: falling light streaks with additive glow, twinkling stars, a soft radial bloom and gentle mouse parallax. Pure Canvas 2D — no WebGL, no dependencies. Drops behind any hero.
React
React 19
TypeScript
Aurora Lightfall is a premium animated background for React 19 + TypeScript built in plain Canvas 2D — no WebGL, no ogl, zero dependencies. Falling light streaks with additive glow, twinkling stars, a soft radial bloom and gentle mouse parallax sit behind any hero or section. Performance-minded: capped device-pixel-ratio, a single canvas with lighter compositing, pauses when off-screen (IntersectionObserver) or when the tab is hidden, and honors prefers-reduced-motion (renders one calm static frame). Fully themeable via props (colors, speed, count, glow, twinkle, angle, background bloom, mouse parallax). Decorative by construction (aria-hidden / role=presentation). Single file, default export.
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 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.
Good packs are practical and well-documented. Look for:
Accessible (WCAG) components with keyboard support
Dark mode and easy theming
TypeScript types and clear prop APIs
A live demo or Storybook
Sensible dependencies you can audit
How do components fit your stack?
Most packs target React with Tailwind or CSS-in-JS, and many ship as copy-paste source rather than an opaque dependency. Check the framework and styling approach against your project before buying.
FAQ
FAQ
A UI component library is a collection of reusable, pre-built interface elements, buttons, forms, navigation, dashboards, that you compose into your app, so you ship a polished interface without building every primitive from scratch.
Paid packs often add polish, accessibility, theming and support that free sets skip. Judge each on its quality, documentation and license rather than price alone.
