Buildinterfacesthatstandout.
A beautifully animated, accessible React component library. Copy-paste the source or install the package — tuned for light and dark, with motion baked in.
$pnpm dlx shadcn@latest add @stacklyui/spotlight-cardAria Sync
Design system
Playwithit
Every tile is a real, working component — drag, hover, and tilt them. When you like one, grab it with a click.
Depth on hover
Move your cursor across me.
Pointer spotlight
A radial glow follows your cursor — written straight to CSS variables, so it never triggers a React re-render.
Scroll
sideways.
Keep going — the shelf glides across as you scroll. Signature components, each animated, accessible, and yours to copy.
Scroll to explore→Spotlight Card
A glow tracks your cursor — pure CSS variables, zero re-renders.
Tilt me
3D Tilt Card
Perspective tilt with a moving glare, driven by pointer position.
Gradient Text
An animated OKLCH gradient sweeps across your headline type.
Number Ticker
Counts up when it scrolls into view, with locale formatting.
Marquee
Infinite GPU-driven scroll with edge fades and pause-on-hover.
everythingThe full catalog
Thecatalog
Signature building blocks for standout interfaces — grouped by what they do. Every one is animated, accessible, and yours to copy.
Whyit'sdifferent
Four commitments that set StacklyUI apart from the flashy-but-fragile alternatives — each one visible, not just claimed.
Motion, done responsibly
Scroll reveals, magnetic buttons, pointer glows and 3D tilt — every animation honors prefers-reduced-motion and keeps focus and keyboard support intact.
GPU-only performance
Transforms and opacity on the compositor. Pointer effects write CSS variables instead of triggering React re-renders, so interactions stay at 60fps.
Warm dual themes
OKLCH tokens tuned for a real light and dark mode. Rebrand the whole system by overriding a handful of CSS variables.
Copy-paste or install
Own the source through the registry CLI, or pull the npm package. Same components — your call, no lock-in.
$ npx shadcn add @stacklyui/spotlight-card
✓ Added spotlight-card.tsx
Own the code — no lock-in.
Signature components
Reduced-motion aware
Compositor-driven
Ways to install
Shipinminutes
Add a component with one command or a single import. It arrives fully themed, animated, and accessible.
- 01
Add it
One command drops the source straight into your project — hooks and utilities included.
- 02
It themes itself
Tokens map to your palette automatically. Light and dark, both tuned from the same OKLCH scale.
- 03
Own every line
No runtime lock-in. Edit the code freely — it's yours from the first paste.