@stacklyui

Animated React components — built with Tailwind CSS and Motion, installable via the shadcn CLI. Copy-paste source you own and can customize.

52 components react shadcn-cli MIT

website ↗ github ↗ registry ↗ agent brief (.md) ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://dev.stacklyui.in/r/registry.json

pnpm pnpm dlx shadcn@latest add https://dev.stacklyui.in/r/registry.json

bun bunx shadcn@latest add https://dev.stacklyui.in/r/registry.json

fetch registry curl -s https://dev.stacklyui.in/r/registry.json

Components

52 total

cn utility lib

Class name merge helper (clsx + tailwind-merge).

npx shadcn@latest add https://dev.stacklyui.in/r/cn.json

useReducedMotion hook

Track the user's prefers-reduced-motion setting.

npx shadcn@latest add https://dev.stacklyui.in/r/use-reduced-motion.json

useInView hook

IntersectionObserver-based in-view detection.

npx shadcn@latest add https://dev.stacklyui.in/r/use-in-view.json

usePointerVars hook

Write pointer position to CSS variables without re-rendering.

npx shadcn@latest add https://dev.stacklyui.in/r/use-pointer-vars.json

Aurora Background ui

A full-bleed animated aurora backdrop.

npx shadcn@latest add https://dev.stacklyui.in/r/aurora-background.json

Spotlight Card ui

Glass card with a pointer-tracked spotlight glow.

npx shadcn@latest add https://dev.stacklyui.in/r/spotlight-card.json

3D Tilt Card ui

A card that tilts in 3D toward the cursor with a light glare.

npx shadcn@latest add https://dev.stacklyui.in/r/card-3d.json

Reveal ui

Scroll-triggered fade + slide reveal wrapper.

npx shadcn@latest add https://dev.stacklyui.in/r/reveal.json

Gradient Text ui

Text painted with an animated clipped gradient.

npx shadcn@latest add https://dev.stacklyui.in/r/gradient-text.json

Bento Grid ui

Responsive bento layout with hover lift and pointer glow.

npx shadcn@latest add https://dev.stacklyui.in/r/bento-grid.json

Animated Beam ui

A traveling light beam drawn between two DOM elements.

npx shadcn@latest add https://dev.stacklyui.in/r/animated-beam.json

Marquee ui

Infinite GPU-driven marquee with pause-on-hover.

npx shadcn@latest add https://dev.stacklyui.in/r/marquee.json

Magnetic Button ui

A button that leans toward the cursor, with a press ripple.

npx shadcn@latest add https://dev.stacklyui.in/r/magnetic-button.json

Number Ticker ui

Animated count-up that triggers when scrolled into view.

npx shadcn@latest add https://dev.stacklyui.in/r/number-ticker.json

Button ui

Versatile button with six variants, four sizes, and asChild.

npx shadcn@latest add https://dev.stacklyui.in/r/button.json

Badge ui

Status/label pill with soft, solid, and semantic variants.

npx shadcn@latest add https://dev.stacklyui.in/r/badge.json

Input ui

Text input with focus ring and invalid state.

npx shadcn@latest add https://dev.stacklyui.in/r/input.json

Textarea ui

Multi-line text input matching Input.

npx shadcn@latest add https://dev.stacklyui.in/r/textarea.json

Label ui

Accessible form label (Radix).

npx shadcn@latest add https://dev.stacklyui.in/r/label.json

Card ui

Composable card: header, title, description, content, footer.

npx shadcn@latest add https://dev.stacklyui.in/r/card.json

Separator ui

Thin visual divider (Radix).

npx shadcn@latest add https://dev.stacklyui.in/r/separator.json

Avatar ui

Image avatar with graceful fallback (Radix).

npx shadcn@latest add https://dev.stacklyui.in/r/avatar.json

Skeleton ui

Loading placeholder with a shimmer sweep.

npx shadcn@latest add https://dev.stacklyui.in/r/skeleton.json

Checkbox ui

Checkbox with an animated check-draw (Radix + Motion).

npx shadcn@latest add https://dev.stacklyui.in/r/checkbox.json

Switch ui

Toggle switch with a spring-eased thumb (Radix).

npx shadcn@latest add https://dev.stacklyui.in/r/switch.json

Radio Group ui

Radio group with a spring indicator (Radix + Motion).

npx shadcn@latest add https://dev.stacklyui.in/r/radio-group.json

Select ui

Animated select menu (Radix).

npx shadcn@latest add https://dev.stacklyui.in/r/select.json

Tabs ui

Tabs with a sliding active indicator (Radix + Motion).

npx shadcn@latest add https://dev.stacklyui.in/r/tabs.json

Tooltip ui

Tooltip with a pop-in animation (Radix).

npx shadcn@latest add https://dev.stacklyui.in/r/tooltip.json

Accordion ui

Accordion with animated height (Radix).

npx shadcn@latest add https://dev.stacklyui.in/r/accordion.json

Dialog ui

Modal dialog with animated overlay and content (Radix).

npx shadcn@latest add https://dev.stacklyui.in/r/dialog.json

Dropdown Menu ui

Dropdown menu with pop animation (Radix).

npx shadcn@latest add https://dev.stacklyui.in/r/dropdown-menu.json

Alert ui

Callout banner with a signature accent rail.

npx shadcn@latest add https://dev.stacklyui.in/r/alert.json

Alert Dialog ui

Modal confirmation for destructive actions (Radix).

npx shadcn@latest add https://dev.stacklyui.in/r/alert-dialog.json

Popover ui

Floating content anchored to a trigger (Radix).

npx shadcn@latest add https://dev.stacklyui.in/r/popover.json

Hover Card ui

Preview card shown on hover (Radix).

npx shadcn@latest add https://dev.stacklyui.in/r/hover-card.json

Collapsible ui

Show/hide a section of content (Radix).

npx shadcn@latest add https://dev.stacklyui.in/r/collapsible.json

Aspect Ratio ui

Constrain content to a ratio (Radix).

npx shadcn@latest add https://dev.stacklyui.in/r/aspect-ratio.json

Progress ui

Determinate progress bar with gradient fill (Radix).

npx shadcn@latest add https://dev.stacklyui.in/r/progress.json

Slider ui

Range slider with gradient track and paper thumb (Radix).

npx shadcn@latest add https://dev.stacklyui.in/r/slider.json

Calendar ui

Dependency-free date picker — single/multiple/range, sliding month transitions, month & year quick-jump, full keyboard grid.

npx shadcn@latest add https://dev.stacklyui.in/r/calendar.json

Toggle ui

Two-state toggle button (Radix).

npx shadcn@latest add https://dev.stacklyui.in/r/toggle.json

Toggle Group ui

A set of toggles, single or multiple (Radix).

npx shadcn@latest add https://dev.stacklyui.in/r/toggle-group.json

Breadcrumb ui

Path to the current page.

npx shadcn@latest add https://dev.stacklyui.in/r/breadcrumb.json

Kbd ui

Keyboard-key hint with a keycap look.

npx shadcn@latest add https://dev.stacklyui.in/r/kbd.json

Spinner ui

Accessible loading spinner.

npx shadcn@latest add https://dev.stacklyui.in/r/spinner.json

Sheet ui

Edge-anchored slide-in panel (Radix).

npx shadcn@latest add https://dev.stacklyui.in/r/sheet.json

Combobox ui

Dependency-free searchable single-select — typeahead filtering, grouping, creatable rows, ARIA combobox keyboard nav, and a portal-positioned dropdown (no Radi…

npx shadcn@latest add https://dev.stacklyui.in/r/combobox.json

Multi Select ui

Searchable multi-select with inline removable chips, select-all, +N-more overflow, a selection cap, grouping, and creatable tags — dependency-free (no Radix).

npx shadcn@latest add https://dev.stacklyui.in/r/multi-select.json

Pagination ui

Stateful pagination with ellipsis truncation, a gliding active pill (Motion layoutId), edge jumps, summary line, page jumper, and a rows-per-page picker.

npx shadcn@latest add https://dev.stacklyui.in/r/pagination.json

Date Picker ui

A formatted date field wired to the dependency-free Calendar in a popover — single or range, dual-month panels, presets, markers, clearable, native form suppor…

npx shadcn@latest add https://dev.stacklyui.in/r/date-picker.json

Toast ui

Sonner-style imperative toasts — a collapsed stack that expands on hover, swipe-to-dismiss, an auto-dismiss progress bar, promise/loading states, actions, and …

npx shadcn@latest add https://dev.stacklyui.in/r/toast.json