sh4dcnv2 · atlas
← libraries

@soralabs

Motion-first React primitives and animated UI components for shadcn/ui. Copy, customize, and ship fluid interfaces.

67 components pro available react shadcn-cli

Install this registry

shadcn (npm) npx shadcn@latest add https://ui.soralabs.studio/r/registry.json
pnpm pnpm dlx shadcn@latest add https://ui.soralabs.studio/r/registry.json
bun bunx shadcn@latest add https://ui.soralabs.studio/r/registry.json
fetch registry curl -s https://ui.soralabs.studio/r/registry.json

Components

67 total
index style
npx shadcn@latest add https://ui.soralabs.studio/r/index.json
Cursor Trail Reveal ui

Desktop cursor trail that reveals staggered image strips with clip-path wipes as the pointer moves.

npx shadcn@latest add https://ui.soralabs.studio/r/cursor-trail-reveal.json
Infinite Scrolling Images ui

An infinite card stack that advances with wheel, touch, or keyboard input using spring-based Motion transitions.

npx shadcn@latest add https://ui.soralabs.studio/r/infinite-scrolling-images.json
Scroll Chapters ui

A draggable, chaptered progress-bar nav — two-way cursor/scroll sync, ghost-cursor hover preview, snap-to-step seeking, and a per-chapter panel that can opt in…

npx shadcn@latest add https://ui.soralabs.studio/r/scroll-chapters.json
Scroll Gallery ui

A full-viewport sticky scroll slider with strip-mask image transitions and animated title swaps, driven by GSAP ScrollTrigger.

npx shadcn@latest add https://ui.soralabs.studio/r/scroll-gallery.json
Sticky Scroll Cards ui

Scroll-pinned hero where a front card flips to reveal a stack of back cards, dismissed one at a time as you keep scrolling.

npx shadcn@latest add https://ui.soralabs.studio/r/sticky-scroll-cards.json
Text Reveal Box ui

Scroll-pinned word-by-word text reveal with a highlight flash, powered by GSAP ScrollTrigger.

npx shadcn@latest add https://ui.soralabs.studio/r/text-reveal-box.json
Tilt Slide Transition ui

Multi-page editorial portfolio transition with tilted scaling exit and diagonal clip-path entrance, powered by View Transition API, GSAP SplitText, and Lenis.

npx shadcn@latest add https://ui.soralabs.studio/r/tilt-slide-transition.json
useAutoHeight hook

A hook that allows you to automatically adjust the height of an element based on its content.

npx shadcn@latest add https://ui.soralabs.studio/r/hooks-use-auto-height.json
useControlledState hook

A hook that allows you to control a state.

npx shadcn@latest add https://ui.soralabs.studio/r/hooks-use-controlled-state.json
usePrefersReducedMotion hook

A hook that tracks the OS-level Reduced Motion setting live, so GSAP-driven primitives can skip or shortcut their animations.

npx shadcn@latest add https://ui.soralabs.studio/r/hooks-use-prefers-reduced-motion.json
Arrow Right ui

Animated right arrow that nudges forward and redraws its stroke on hover using a pure CSS stroke-dash animation.

npx shadcn@latest add https://ui.soralabs.studio/r/icons-arrow-right.json
Bell ui

Notification bell that rattles from its hanger on trigger — a decaying rotation pivot.

npx shadcn@latest add https://ui.soralabs.studio/r/icons-bell.json
Chevrons ui

Animated double up-chevron that cross-fades between the two carets on trigger.

npx shadcn@latest add https://ui.soralabs.studio/r/icons-chevrons.json
Copy ui

Animated copy icon that smoothly transitions into a checkmark on trigger with a scale and blur pop effect.

npx shadcn@latest add https://ui.soralabs.studio/r/icons-copy.json
Scroll Trigger Utils lib

Shared GSAP ScrollTrigger helpers (window/scroller detection, ready/resize waiting) used by scroll-driven primitives.

npx shadcn@latest add https://ui.soralabs.studio/r/lib-scroll-trigger-utils.json
Arrow Roll Button ui

A bespoke studio CTA button with rolling text-shadow and dual-arrow sliding transitions on hover.

npx shadcn@latest add https://ui.soralabs.studio/r/arrow-roll-button.json
Particle Hover Button ui

A wrapper that emits glowing, pooled particles from the cursor while hovering any button or link.

npx shadcn@latest add https://ui.soralabs.studio/r/particle-hover-button.json
Sliding Chip Button ui

A chip-style call-to-action link with a Motion-powered sliding label and rotating icon chips on hover.

npx shadcn@latest add https://ui.soralabs.studio/r/sliding-chip-button.json
Stagger Button ui

A button that staggers per character or slides the whole label on hover, with a scaling background layer.

npx shadcn@latest add https://ui.soralabs.studio/r/stagger-button.json
Accordion ui

An animated FAQ accordion with expandable panels, powered by Motion.

npx shadcn@latest add https://ui.soralabs.studio/r/accordion.json
Expandable Tabs ui

A pill-shaped tab bar that expands into a floating panel, with Motion driving the shell, label, and content transitions.

npx shadcn@latest add https://ui.soralabs.studio/r/expandable-tabs.json
Inline Testimonials ui

A flowing quote stream where each avatar reveals its author on hover, with Motion fading and blurring the rest.

npx shadcn@latest add https://ui.soralabs.studio/r/inline-testimonials.json
Cursor Bubble ui

A floating label that follows the cursor and elastic-pops into view over interactive targets, powered by GSAP.

npx shadcn@latest add https://ui.soralabs.studio/r/cursor-bubble.json
Hero Carousel ui

Crossfading hero image slideshow with a progress pill, play/pause, and prev/next controls.

npx shadcn@latest add https://ui.soralabs.studio/r/hero-carousel.json
Highlight ui

A Motion-powered highlight effect that allows you to highlight elements on hover, click or with a controlled value.

npx shadcn@latest add https://ui.soralabs.studio/r/highlight.json
Logo Carousel Swapper ui

Staggered logo column swapper with fade, vertical shift, and motion blur powered by Motion.

npx shadcn@latest add https://ui.soralabs.studio/r/logo-carousel-swapper.json
Magnetic Cards ui

A fanned stack of cards that fling away from the cursor on release, with GSAP InertiaPlugin easing each one back to rest.

npx shadcn@latest add https://ui.soralabs.studio/r/magnetic-cards.json
Pixel Image Loader ui

A canvas-based image that resolves from a blocky, pixelated placeholder up to full sharpness as it loads.

npx shadcn@latest add https://ui.soralabs.studio/r/pixel-image-loader.json
Progressive Blur ui

A stacked-layer blur that ramps smoothly from sharp to fully blurred toward an edge, for fading content under a fixed header or above a scroll boundary.

npx shadcn@latest add https://ui.soralabs.studio/r/progressive-blur.json
Skeleton ui

A loading placeholder with shimmer or fade variants, plus a transition that crossfades into real content once loading finishes.

npx shadcn@latest add https://ui.soralabs.studio/r/skeleton.json
Skeleton Shimmer ui

Skeleton loading placeholders with a shimmer effect that transitions to revealed content via a CSS view-transition wipe animation. Skeletons are sized using pl…

npx shadcn@latest add https://ui.soralabs.studio/r/skeleton-shimmer.json
Tilt Card ui

3D tilt card that rotates toward the cursor on spring physics, with an optional glare reflection.

npx shadcn@latest add https://ui.soralabs.studio/r/tilt-card.json
Video Player ui

Dependency-free custom video player: modal overlay, chaptered timeline, hover-scrub preview, speed menu, picture-in-picture, fullscreen, keyboard shortcuts, an…

npx shadcn@latest add https://ui.soralabs.studio/r/video-player.json
Dia Text Reveal ui

A gradient sweep that reveals text with a chromatic wash, powered by Motion.

npx shadcn@latest add https://ui.soralabs.studio/r/dia-text-reveal.json
Draw Underline Link ui

A link with a hand-drawn SVG underline that animates on hover, powered by Motion.

npx shadcn@latest add https://ui.soralabs.studio/r/draw-underline-link.json
Dual Wipe Reveal ui

Dual-layer block wipe reveal that sweeps away curtain blocks to unveil text, powered by Motion.

npx shadcn@latest add https://ui.soralabs.studio/r/dual-wipe-reveal.json
Fog Text Reveal ui

Inline text that materializes through a soft, turbulent WebGL fog mask, inherits font and color from CSS, and cycles through an array of messages.

npx shadcn@latest add https://ui.soralabs.studio/r/fog-text-reveal.json
Number Flow ui

An animated, digit-by-digit number counter with a smooth rolling odometer effect, powered by Motion.

npx shadcn@latest add https://ui.soralabs.studio/r/number-flow.json
Rolling Text ui

Per-character slot-machine reveal that rolls each letter into place once it scrolls into view, powered by Motion.

npx shadcn@latest add https://ui.soralabs.studio/r/rolling-text.json
Text Cursor Loop ui

Cycles through a list of words with a per-character collapse/reveal transition and a trailing cursor glyph that wipes across the text between words.

npx shadcn@latest add https://ui.soralabs.studio/r/text-cursor-loop.json
Text Effect ui

Preset-driven staggered text reveals with blur, fade, slide, and scale animations, powered by Motion.

npx shadcn@latest add https://ui.soralabs.studio/r/text-effect.json
Text Loop ui

Cycles through a list of items with an enter/exit animation, powered by Motion.

npx shadcn@latest add https://ui.soralabs.studio/r/text-loop.json
Text Morph ui

Per-character layout morphing for labels, counters, and live text swaps, powered by Motion.

npx shadcn@latest add https://ui.soralabs.studio/r/text-morph.json
Text Reveal (Block) ui

Line-by-line text reveal with a colored block wipe, powered by GSAP SplitText.

npx shadcn@latest add https://ui.soralabs.studio/r/text-reveal-block.json
Text Reveal (Mask) ui

A scroll-triggered masked slide-up text reveal animation, powered by Motion.

npx shadcn@latest add https://ui.soralabs.studio/r/text-reveal-mask.json
Text Roll ui

A per-character vertical text roll animation for label swaps and micro-interactions, powered by Motion.

npx shadcn@latest add https://ui.soralabs.studio/r/text-roll.json
Text Scramble ui

A text scramble reveal animation that decodes characters on mount or when re-triggered, powered by Motion.

npx shadcn@latest add https://ui.soralabs.studio/r/text-scramble.json
Typer ui

A character-by-character reveal where each glyph ripples through randomized pill, accent, and outline states before settling into plain text. Adjacent same-sta…

npx shadcn@latest add https://ui.soralabs.studio/r/typer.json
Base Accordion ui

An animated accordion component built on Base UI with spring physics, height collapse mask gradient, blur transitions, and gliding layoutId focus ring.

npx shadcn@latest add https://ui.soralabs.studio/r/base-accordion.json
Base Alert Dialog ui

An accessible alert dialog built on Base UI with smooth Motion 3D perspective entrance and exit animations, customizable sizes, and media slots.

npx shadcn@latest add https://ui.soralabs.studio/r/base-alert-dialog.json
Base Button ui

An interactive button component built on Base UI with Motion hover/tap scaling and shadcn/ui variants.

npx shadcn@latest add https://ui.soralabs.studio/r/base-button.json
Base Checkbox ui

An accessible, stylable checkbox built on Base UI with a Motion-friendly animated indicator.

npx shadcn@latest add https://ui.soralabs.studio/r/base-checkbox.json
Base Context Menu ui

An accessible context menu built on Base UI with smooth Motion spring scale and submenu slide animations.

npx shadcn@latest add https://ui.soralabs.studio/r/base-context-menu.json
Base Dialog ui

An accessible modal dialog built on Base UI with smooth Motion spring entrance and exit animations.

npx shadcn@latest add https://ui.soralabs.studio/r/base-dialog.json
Base Dropdown Menu ui

An accessible dropdown menu built on Base UI with smooth Motion spring scale and submenu slide animations.

npx shadcn@latest add https://ui.soralabs.studio/r/base-dropdown-menu.json
Base Switch ui

An accessible, highly customizable switch built on Base UI with Motion spring layout physics.

npx shadcn@latest add https://ui.soralabs.studio/r/base-switch.json
Base Tooltip ui

An accessible tooltip built on Base UI with spring-based keyframe scale and translation animations powered by Motion.

npx shadcn@latest add https://ui.soralabs.studio/r/base-tooltip.json
Radix Accordion ui

An animated accordion component built on Radix UI with spring physics, height collapse mask gradient, blur transitions, and gliding layoutId focus ring.

npx shadcn@latest add https://ui.soralabs.studio/r/radix-accordion.json
Radix Alert Dialog ui

An accessible alert dialog built on Radix UI with smooth Motion 3D perspective entrance and exit animations, customizable sizes, and media slots.

npx shadcn@latest add https://ui.soralabs.studio/r/radix-alert-dialog.json
Radix Button ui

An interactive button component built on Radix UI Slot with Motion hover/tap scaling and shadcn/ui variants.

npx shadcn@latest add https://ui.soralabs.studio/r/radix-button.json
Radix Checkbox ui

An accessible, stylable checkbox built on Radix UI with a Motion-friendly animated indicator.

npx shadcn@latest add https://ui.soralabs.studio/r/radix-checkbox.json
Radix Context Menu ui

An accessible context menu built on Radix UI with smooth Motion spring scale and submenu slide animations.

npx shadcn@latest add https://ui.soralabs.studio/r/radix-context-menu.json
Radix Dialog ui

An accessible modal dialog built on Radix UI with smooth Motion spring entrance and exit animations.

npx shadcn@latest add https://ui.soralabs.studio/r/radix-dialog.json
Radix Dropdown Menu ui

An accessible dropdown menu built on Radix UI with smooth Motion spring scale and submenu slide animations.

npx shadcn@latest add https://ui.soralabs.studio/r/radix-dropdown-menu.json
Radix Switch ui

An accessible, highly customizable switch built on Radix UI with Motion spring layout physics.

npx shadcn@latest add https://ui.soralabs.studio/r/radix-switch.json
Radix Tooltip ui

An accessible tooltip built on Radix UI with spring-based keyframe scale and translation animations powered by Motion.

npx shadcn@latest add https://ui.soralabs.studio/r/radix-tooltip.json