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.
A flagship pricing section: canvas light-rain backdrop, rotating conic ring on the popular card, rolling-digit prices on a spring Monthly/Yearly switch, deep 3D buttons and a blur-stagger reveal.
React
TypeScript
framer-motion
The most complete pricing section on the shelf — atmosphere (canvas light rain + masked grid + halo), hierarchy (a conic-ring popular card with glow) and delight (prices that roll digit-by-digit when you flip the billing period).
Our own rolling-digit implementation — no @number-flow dependency. Deep Apple-style 3D buttons; one `accent` variable retints the rain, the ring, the checks and the CTAs. Blur-stagger entrance, spring pill switch with a save chip, reduced-motion safe. Three plans, responsive to a single column. Only dependency: framer-motion.
A luxury button engineered like a machined object: polished conic-metal bezel, deep-bevel cap with engraved label, cursor-tracking specular, hover sheen and press physics that sink and flash — five finishes, zero deps.
React
TypeScript
Button
Looks engineered, not styled: a conic-gradient bezel that reads as polished metal, a dark transition ring, and a cap with real bevel depth. The specular highlight follows the cursor like light on lacquer; hover adds a sheen sweep; pressing sinks the cap 2px with a flash.
Five machined finishes for different intents — obsidian (primary CTA), platinum (secondary), gold (premium), emerald (confirm), ruby (destructive) — in four sizes. Zero dependencies: no Tailwind, no radix, no cva. One file, engraved-label typography included, focus ring + disabled + touch + reduced-motion handled.
Three seamlessly looping columns of testimonial cards at different speeds — edge fade, pause on hover, ringed avatars. Pure CSS animation, zero dependencies, placeholder people included.
React
TypeScript
Testimonials
The classic scrolling-testimonials wall, done right: three columns drift at different speeds for a living, organic feel. Seamless loop (duplicated track + translateY(-50%)), pause on hover so quotes can be read, and a soft fade at both edges.
Polished cards: oversized quote mark, accent-ringed avatar, hover lift. Works instantly with placeholder people — pass your own `testimonials` (text, image, name, role) to make it yours. Zero dependencies — no framer-motion, no Tailwind. One file, light & dark, reduced-motion aware.
A premium bento layout with the classic hover choreography (content lifts, CTA reveals) plus a cursor-tracking spotlight, an accent hairline and per-card accent tinting — zero dependencies.
React
TypeScript
Bento
The bento pattern every landing page wants, with real polish: on hover the content lifts, the icon shrinks to the corner and the CTA slides in. Our twist — a spotlight that follows the cursor tinted to each card's accent, plus an accent hairline that draws across the top.
Each card takes a `background` slot (images or animated layers), a per-card accent color, spans 1–3 columns and supports light/dark. Zero dependencies — no Tailwind, no radix, no shadcn. One file, works anywhere React runs.
A feature/benefit card with an index, a tinted radial glow, a central illustration that idle-floats and pops on hover, and a frosted content plate with a color-tinted tag. Five color palettes, ships with original SVG glyphs, light & dark.
React
TypeScript
framer-motion
A polished feature/benefit card for landing pages and product tours. It shows a monospace index, a tinted radial wash and a pulsing glow behind a central illustration that idle-floats and pops forward on hover, and a frosted glass content plate with a color-tinted tag and title. The whole card lifts on hover. Five color palettes (orange, purple, blue, emerald, rose), each with a matching built-in SVG glyph so it works out of the box — or pass your own image/node. Self-contained (injects its own CSS, no Tailwind required), light & dark, React 19 + TypeScript strict, reduced-motion aware. Requires framer-motion.
A row of dome-topped pastel panels, each with a cartoon character peeking up from the bottom. Panels stagger in with a spring, gently bob, and lift on hover. Ships with cartoon-avatar defaults, light & dark.
React
TypeScript
framer-motion
A charming, on-brand team section. A row of dome-topped pastel panels — each a different color — staggers in with a spring as it scrolls into view, gently bobbing, with a cartoon character peeking up from the bottom of each panel. Hover a panel and it lifts and the character scales up. Includes a headline, description and call-to-action button, and ships with DiceBear cartoon-avatar defaults so it works out of the box (swap in your own images and any panel colors). Self-contained (injects its own CSS, no Tailwind or shadcn required), light & dark, React 19 + TypeScript strict, reduced-motion aware. Requires framer-motion.
A fanned arc of team photos that springs into a curve when it scrolls into view. On hover the focused card straightens and pops forward while the rest fall back, and a name/role plate slides up. Self-contained, light & dark.
React
TypeScript
framer-motion
A playful team showcase. The photo cards spring out from the center into a fanned arc when the section scrolls into view, each staggering in with a spring. Hover any card and it straightens and pops forward while the others dim and fall back, and a name/role plate slides up from the bottom. Fully configurable spread, curve and fan angle. Ships as a single self-contained file (injects its own CSS, no Tailwind required), works in light or dark, React 19 + TypeScript strict, and is reduced-motion aware. Requires framer-motion.
A glowing floating AI chat launcher: an orb with a rotating aurora aura + pulse opens a glassy composer that springs in — status header, model badge, quick-prompt chips, auto-growing textarea with a character bar, a tool row with tooltips, and a send button with a light sweep. Closes on outside click or Escape.
React
TypeScript
lucide-react
A premium floating AI assistant launcher for any app. A glowing orb with a rotating aurora aura and soft pulse opens a glassy chat panel that springs into place: a live status header, model + Pro badges, quick-prompt suggestion chips, an auto-growing textarea with a character progress bar, a tool row (attach, link, code, design, voice) with tooltips, and a gradient send button with a light-sweep on hover. Closes on outside click or Escape, focuses the input on open, and supports Enter-to-send / Shift+Enter for a new line. Configurable model, Pro badge, max characters, position and suggestions, with an onSend callback. Self-contained CSS (no Tailwind required), React 19 + TypeScript strict, accessible and reduced-motion aware. Requires lucide-react.
A bold, playful marketplace landing hero: grid-lined electric background, navbar, massive layered typography with a hard offset shadow, floating seller cards that bob, hand-drawn arrows, a spinning "start selling" badge and a rounded features section.
React
TypeScript
framer-motion
A high-impact landing hero for a marketplace or creator platform. It layers a grid-lined electric-blue background, a navbar, huge stacked typography with a chunky offset shadow, glassy floating "seller" cards that gently bob with framer-motion, hand-drawn SVG arrows, a spinning circular "start selling — free" badge, and a rounded three-up features section (list, price, get paid). Self-contained (injects its own CSS, no Tailwind required), responsive and reduced-motion aware. React 19 + TypeScript strict. Requires framer-motion.
A true 3D rotating carousel: cards arranged around a cylinder in real perspective. The ring spins on page scroll — or drag / wheel over the gallery — so cards swing forward with genuine depth. The front card is active and its name shows below.
React
TypeScript
Carousel
A real 3D carousel, not a flat slider. Cards are placed around a cylinder using perspective, rotateY and translateZ with their faces pointing outward, and back faces hidden for a clean coverflow feel. The ring spins as the page scrolls, or you can drag and wheel directly over the gallery to rotate it. The card facing the camera becomes active and its name and subtitle animate in below. Pass your own items (photos + labels) or use the built-in people placeholders. Self-contained CSS, cleans up on unmount, React 19 + TypeScript strict, reduced-motion friendly.
Isometric "impossible" text that rolls up on hover. Each line is skewed into an isometric block and staircased; on hover GSAP slides every line up one step so the whole phrase rolls to the next word. Themeable and responsive.
React
TypeScript
GSAP
A hypnotic hero-text effect. Each line of the phrase is skewed into an isometric block and clipped so only its top word shows, then offset into a staircase. On hover (or focus) GSAP slides every line up one step with a stagger, so the whole phrase rolls to the next word — and reverses smoothly on leave. Pass a phrase via words, or take full control with explicit top/bottom lines. Responsive font sizing, custom color for dark backgrounds, React 19 + TypeScript strict, and prefers-reduced-motion aware. Requires gsap.
A staggered testimonial carousel: cards fan out around a highlighted center card with a notched corner and tilt. Click, arrows, arrow keys or drag to advance. Auto-plays and pauses on hover. Self-contained, light & dark.
React
TypeScript
lucide-react
A striking way to show social proof. Testimonial cards fan out in 3D around a highlighted center card that has a notched corner and a bold offset shadow. Bring any card to the center by clicking it, using the arrows or arrow keys, or dragging. It auto-advances and pauses on hover or focus, and adapts card size on smaller screens. Ships as a single self-contained file (injects its own CSS, no Tailwind required), works in light or dark, React 19 + TypeScript strict, accessible and reduced-motion aware.
A premium hire-a-freelancer card: banner with soft zoom, avatar with online dot, half-star rating, meta chips, a tools row and a glossy "Get in touch" CTA. Self-contained CSS, light & dark, fully accessible.
React
TypeScript
lucide-react
A polished profile card for marketplaces and portfolios. It shows a tinted banner that gently zooms on hover, an avatar with an online indicator and ring, a real half-star rating, meta chips (rating, duration, rate), a tools row, a bookmark toggle that fills when saved, and a primary call-to-action. The whole card lifts on hover. Ships as a single self-contained file (injects its own CSS, no Tailwind required), works in light or dark, and is built React 19 + TypeScript strict with accessible, reduced-motion-aware interactions.
A composable analytics card whose chart comes alive on hover: the area fills, the trend line brightens, bars cascade up, points pop, a live point pulses, a value chip slides in and a light sheen sweeps across. clsx + tailwind-merge.
React 19
React
TypeScript
Animated Card Chart is a composable analytics card whose visual wakes up on hover: the area fills, the trend line brightens, bars rise in a staggered cascade, data points pop, a live point pulses, a value chip slides in, and a light sheen sweeps across while the whole card lifts.
Composable, drop-in API: AnimatedCard / CardVisual / CardBody / CardTitle / CardDescription, plus Visual3 (the chart) with mainColor / secondaryColor to recolor instantly. 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 media-frame grid where hovering a frame expands its row and column (the whole grid reflows smoothly) and tilts that single card in 3D toward the cursor with a glare. Bring your own clips/images. Framer Motion.
React 19
React
TypeScript
Dynamic Frame Layout is an interactive grid of media frames. Hovering a frame expands its row and column — the whole grid re-flows smoothly via framer-motion — while that single card tilts in 3D toward the cursor with a moving glare. Other cards stay flat.
Each frame's media can be a video URL, image URL, or any React node; the built-in defaults are original animated gradient tiles (no third-party assets bundled), so it looks great before you add content. Configurable columns, gap and hover-expand amount. Self-contained CSS, accessible focus support, prefers-reduced-motion friendly. React 19 + TypeScript. Requires framer-motion. Original work for Assetzaar.
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.
