StacklyUI

Overview

StacklyUI is an animated, accessible React component library that can be copied as source or installed through the shadcn CLI. Its registry lists 52 items: 48 UI components, three hooks (use-reduced-motion, use-in-view, use-pointer-vars) and a cn utility. Components are tuned for both light and dark mode and have motion built in.

The set mixes standard primitives (button, dialog, select, tabs, combobox, multi-select, date picker, toast) with showcase pieces such as an aurora background, spotlight card, 3D tilt card, animated beam, marquee, magnetic button and number ticker. Theming runs on a handful of OKLCH tokens, so changing four CSS variables rebrands every component.

Features

• Motion components: Spotlight card, 3D tilt card, gradient text, bento grid, animated beam, marquee, magnetic button and number ticker.
• Core primitives: Inputs, checkbox, switch, radio group, slider, accordion, dialog, sheet, popover, hover card, tooltip and more, many on Radix UI.
• OKLCH theming: Components read from --accent, --accent-2, --accent-3 and --radius variables.
• Pointer effects without re-renders: The spotlight glow writes cursor position straight to CSS variables.
• Reduced motion: A dedicated hook and reduced-motion handling are part of the library.
• Composite inputs: Combobox, multi-select, date picker, calendar and pagination are included.

Tech stack

• React, Next.js, TypeScript
• Tailwind CSS, Motion, Radix UI

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @stacklyui/component-name