---
name: "@stacklyui"
slug: "stacklyui"
description: "Animated React components — built with Tailwind CSS and Motion, installable via the shadcn CLI. Copy-paste source you own and can customize."
category: "Animated components"
tags: ["3d", "animation", "backgrounds", "buttons", "cards", "forms", "hooks", "loaders", "media", "navigation", "overlays"]
framework: "react"
license: "MIT"
author: "soumyajiitt"
website: "https://dev.stacklyui.in"
github: "https://github.com/soumyajiitt/stacklyui"
registry: "https://dev.stacklyui.in/r/registry.json"
pro: false
pro_url: null
github_stars: 1
component_count: 52
generated_at: "2026-10-10T06:32:55.998Z"
---

# @stacklyui

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

## Links

- Website: https://dev.stacklyui.in
- GitHub: https://github.com/soumyajiitt/stacklyui
- Registry JSON: https://dev.stacklyui.in/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/stacklyui
- This file: https://sh4dcn.vercel.app/md/stacklyui.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://dev.stacklyui.in/r/registry.json
pnpm dlx shadcn@latest add https://dev.stacklyui.in/r/registry.json
bunx shadcn@latest add https://dev.stacklyui.in/r/registry.json
# clone the source repo
git clone https://github.com/soumyajiitt/stacklyui.git
# fetch the raw registry index
curl -s https://dev.stacklyui.in/r/registry.json
```

## Components (52)

| name | type | description | install |
| --- | --- | --- | --- |
| cn | registry:lib | Class name merge helper (clsx + tailwind-merge). | `npx shadcn@latest add https://dev.stacklyui.in/r/cn.json` |
| use-reduced-motion | registry:hook | Track the user's prefers-reduced-motion setting. | `npx shadcn@latest add https://dev.stacklyui.in/r/use-reduced-motion.json` |
| use-in-view | registry:hook | IntersectionObserver-based in-view detection. | `npx shadcn@latest add https://dev.stacklyui.in/r/use-in-view.json` |
| use-pointer-vars | registry: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 | registry:ui | A full-bleed animated aurora backdrop. | `npx shadcn@latest add https://dev.stacklyui.in/r/aurora-background.json` |
| spotlight-card | registry:ui | Glass card with a pointer-tracked spotlight glow. | `npx shadcn@latest add https://dev.stacklyui.in/r/spotlight-card.json` |
| card-3d | registry: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 | registry:ui | Scroll-triggered fade + slide reveal wrapper. | `npx shadcn@latest add https://dev.stacklyui.in/r/reveal.json` |
| gradient-text | registry:ui | Text painted with an animated clipped gradient. | `npx shadcn@latest add https://dev.stacklyui.in/r/gradient-text.json` |
| bento-grid | registry:ui | Responsive bento layout with hover lift and pointer glow. | `npx shadcn@latest add https://dev.stacklyui.in/r/bento-grid.json` |
| animated-beam | registry:ui | A traveling light beam drawn between two DOM elements. | `npx shadcn@latest add https://dev.stacklyui.in/r/animated-beam.json` |
| marquee | registry:ui | Infinite GPU-driven marquee with pause-on-hover. | `npx shadcn@latest add https://dev.stacklyui.in/r/marquee.json` |
| magnetic-button | registry: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 | registry:ui | Animated count-up that triggers when scrolled into view. | `npx shadcn@latest add https://dev.stacklyui.in/r/number-ticker.json` |
| button | registry:ui | Versatile button with six variants, four sizes, and asChild. | `npx shadcn@latest add https://dev.stacklyui.in/r/button.json` |
| badge | registry:ui | Status/label pill with soft, solid, and semantic variants. | `npx shadcn@latest add https://dev.stacklyui.in/r/badge.json` |
| input | registry:ui | Text input with focus ring and invalid state. | `npx shadcn@latest add https://dev.stacklyui.in/r/input.json` |
| textarea | registry:ui | Multi-line text input matching Input. | `npx shadcn@latest add https://dev.stacklyui.in/r/textarea.json` |
| label | registry:ui | Accessible form label (Radix). | `npx shadcn@latest add https://dev.stacklyui.in/r/label.json` |
| card | registry:ui | Composable card: header, title, description, content, footer. | `npx shadcn@latest add https://dev.stacklyui.in/r/card.json` |
| separator | registry:ui | Thin visual divider (Radix). | `npx shadcn@latest add https://dev.stacklyui.in/r/separator.json` |
| avatar | registry:ui | Image avatar with graceful fallback (Radix). | `npx shadcn@latest add https://dev.stacklyui.in/r/avatar.json` |
| skeleton | registry:ui | Loading placeholder with a shimmer sweep. | `npx shadcn@latest add https://dev.stacklyui.in/r/skeleton.json` |
| checkbox | registry:ui | Checkbox with an animated check-draw (Radix + Motion). | `npx shadcn@latest add https://dev.stacklyui.in/r/checkbox.json` |
| switch | registry:ui | Toggle switch with a spring-eased thumb (Radix). | `npx shadcn@latest add https://dev.stacklyui.in/r/switch.json` |
| radio-group | registry:ui | Radio group with a spring indicator (Radix + Motion). | `npx shadcn@latest add https://dev.stacklyui.in/r/radio-group.json` |
| select | registry:ui | Animated select menu (Radix). | `npx shadcn@latest add https://dev.stacklyui.in/r/select.json` |
| tabs | registry:ui | Tabs with a sliding active indicator (Radix + Motion). | `npx shadcn@latest add https://dev.stacklyui.in/r/tabs.json` |
| tooltip | registry:ui | Tooltip with a pop-in animation (Radix). | `npx shadcn@latest add https://dev.stacklyui.in/r/tooltip.json` |
| accordion | registry:ui | Accordion with animated height (Radix). | `npx shadcn@latest add https://dev.stacklyui.in/r/accordion.json` |
| dialog | registry:ui | Modal dialog with animated overlay and content (Radix). | `npx shadcn@latest add https://dev.stacklyui.in/r/dialog.json` |
| dropdown-menu | registry:ui | Dropdown menu with pop animation (Radix). | `npx shadcn@latest add https://dev.stacklyui.in/r/dropdown-menu.json` |
| alert | registry:ui | Callout banner with a signature accent rail. | `npx shadcn@latest add https://dev.stacklyui.in/r/alert.json` |
| alert-dialog | registry:ui | Modal confirmation for destructive actions (Radix). | `npx shadcn@latest add https://dev.stacklyui.in/r/alert-dialog.json` |
| popover | registry:ui | Floating content anchored to a trigger (Radix). | `npx shadcn@latest add https://dev.stacklyui.in/r/popover.json` |
| hover-card | registry:ui | Preview card shown on hover (Radix). | `npx shadcn@latest add https://dev.stacklyui.in/r/hover-card.json` |
| collapsible | registry:ui | Show/hide a section of content (Radix). | `npx shadcn@latest add https://dev.stacklyui.in/r/collapsible.json` |
| aspect-ratio | registry:ui | Constrain content to a ratio (Radix). | `npx shadcn@latest add https://dev.stacklyui.in/r/aspect-ratio.json` |
| progress | registry:ui | Determinate progress bar with gradient fill (Radix). | `npx shadcn@latest add https://dev.stacklyui.in/r/progress.json` |
| slider | registry:ui | Range slider with gradient track and paper thumb (Radix). | `npx shadcn@latest add https://dev.stacklyui.in/r/slider.json` |
| calendar | registry: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 | registry:ui | Two-state toggle button (Radix). | `npx shadcn@latest add https://dev.stacklyui.in/r/toggle.json` |
| toggle-group | registry:ui | A set of toggles, single or multiple (Radix). | `npx shadcn@latest add https://dev.stacklyui.in/r/toggle-group.json` |
| breadcrumb | registry:ui | Path to the current page. | `npx shadcn@latest add https://dev.stacklyui.in/r/breadcrumb.json` |
| kbd | registry:ui | Keyboard-key hint with a keycap look. | `npx shadcn@latest add https://dev.stacklyui.in/r/kbd.json` |
| spinner | registry:ui | Accessible loading spinner. | `npx shadcn@latest add https://dev.stacklyui.in/r/spinner.json` |
| sheet | registry:ui | Edge-anchored slide-in panel (Radix). | `npx shadcn@latest add https://dev.stacklyui.in/r/sheet.json` |
| combobox | registry: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 | registry: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 | registry: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 | registry: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 | registry: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` |

## For AI agents

```text
You are adding components from @stacklyui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/stacklyui.md) for the component list.
2. Fetch the machine-readable index: https://dev.stacklyui.in/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: stacklyui).
```