sh4dcnv2 · atlas
← libraries

@uselayouts

Micro-interaction UI library of ~30 premium animated React components built with Framer Motion (motion) and Tailwind CSS v4, targeting React 19, designed to complement shadcn/ui. Includes 3D Book, Animated Collection, Bento Card, Bottom Menu, Day Picker, Delete/Discover Buttons, Discrete Tabs, Dynamic Toolbar, Expandable Gallery, Feature Carousel, Fluid Expanding Grid, Folder Interaction, Inline Edit, Magnified Bento, Morphing Input, Multi-Step Form, Pricing Card, Smooth Dropdown, Stacked List, Status Button, Toggle Sidebar, and Vertical Tabs. Fully free and MIT-licensed. Use for: injecting high-craft, direction-aware micro-interactions and layout animations into Next.js projects where feel and motion quality matter.

64 components react shadcn-cli MIT

Install this registry

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

Components

64 total
3D Book component

An interactive 3D book component with page flip animations.

npx shadcn@latest add https://uselayouts.com/r/3d-book.json
Accessible Action component

Interactive draggable card stack with 3D tilt, swipe-to-back gestures, click interactions, random rotation, and smooth spring animations.

npx shadcn@latest add https://uselayouts.com/r/accessible-action.json
AccordionOS component

Interactive accordion showcase with animated content, image transitions, hover effects, keyboard navigation, autoplay, and responsive design.

npx shadcn@latest add https://uselayouts.com/r/accordionos.json
Analog Stick component

A metallic stick that tilts into the press. Hover a quadrant and the cap leans, the shadow shifts, and the matching arrow goes amber.

npx shadcn@latest add https://uselayouts.com/r/analog-stick.json
Animated Collection component

A collection of items with smooth layout transitions and animations.

npx shadcn@latest add https://uselayouts.com/r/animated-collection.json
Bento Card component

An interactive bento card with animated tabs and workspace preview.

npx shadcn@latest add https://uselayouts.com/r/bento-card.json
Bottom Menu component

A floating bottom navigation menu with smooth interactions.

npx shadcn@latest add https://uselayouts.com/r/bottom-menu.json
Bucket component

An interactive card component that simulates a bucket where chips are tossed and replaced with smooth physics-inspired animations.

npx shadcn@latest add https://uselayouts.com/r/bucket.json
Card Folder component

This component creates an animated folder-style card with a background image, floating 3D object, hover effects, and customizable colors and text. You can easi…

npx shadcn@latest add https://uselayouts.com/r/card-folder.json
Client Card component

A client CRM card with payment and deadline rings, plus a morphing avatar stack.

npx shadcn@latest add https://uselayouts.com/r/client-card.json
Confidential Folder component

A charcoal sleeve that pulls a letter out, flips it, and lands it in front of you.

npx shadcn@latest add https://uselayouts.com/r/confidential-folder.json
Corner Video component

A compact corner video player with smooth open/close morphing, autoplay, mute, enlarge, hover controls, and video scrubbing.

npx shadcn@latest add https://uselayouts.com/r/corner-video.json
Coverflow Drag component

A drag coverflow of portraits that scale, dim, and snap as you swipe.

npx shadcn@latest add https://uselayouts.com/r/coverflow-drag.json
Create Menu component

A Start Creating pill that springs open into a list of create actions.

npx shadcn@latest add https://uselayouts.com/r/create-menu.json
Curve Drawer component

Side drawers whose inner edge starts as a bulge and morphs into a straight line as the panel settles.

npx shadcn@latest add https://uselayouts.com/r/curve-drawer.json
Day Picker component

A custom day picker component with smooth animations.

npx shadcn@latest add https://uselayouts.com/r/day-picker.json
Delete Button component

A confirmation button with smooth icon transitions.

npx shadcn@latest add https://uselayouts.com/r/delete-button.json
Discover Button component

An interactive button with expanding discovery state.

npx shadcn@latest add https://uselayouts.com/r/discover-button.json
Discrete Tabs component

A tab component with discrete sliding animations.

npx shadcn@latest add https://uselayouts.com/r/discrete-tabs.json
Drawer Buttons component

Two buttons that open side drawers with a 3D fold. Payment comes from the right, cart from the left, and the fields stagger in.

npx shadcn@latest add https://uselayouts.com/r/drawer-buttons.json
Dynamic Grid Gallery component

A 3×2 photo grid that grows the hovered row and column so one still takes the stage.

npx shadcn@latest add https://uselayouts.com/r/dynamic-grid-gallery.json
Dynamic Toolbar component

A toolbar that adapts its size and layout based on content.

npx shadcn@latest add https://uselayouts.com/r/dynamic-toolbar.json
Editorial Deck component

A stacked editorial story deck. Drag the front card and it springs back into the pile.

npx shadcn@latest add https://uselayouts.com/r/editorial-deck.json
Empty Testimonial component

An interactive empty state for testimonials with a playful folder animation.

npx shadcn@latest add https://uselayouts.com/r/empty-testimonial.json
Expandable Gallery component

A photo gallery with smooth item expansion.

npx shadcn@latest add https://uselayouts.com/r/expandable-gallery.json
Feature Carousel component

A smooth carousel for showcasing product features.

npx shadcn@latest add https://uselayouts.com/r/feature-carousel.json
Filter Interaction component

Interactive list items with hover and focus effects.

npx shadcn@latest add https://uselayouts.com/r/filter-interaction.json
Fluid Expanding Grid component

A responsive gallery grid that fluidly shifts and expands items using motion layout.

npx shadcn@latest add https://uselayouts.com/r/fluid-expanding-grid.json
Focus Testimonials component

Interactive testimonial section with hover-based focus effects, animated author tooltips, and expandable testimonials.

npx shadcn@latest add https://uselayouts.com/r/focus-testimonials.json
Folder Interaction component

A folder management system with drag-and-drop-like feel.

npx shadcn@latest add https://uselayouts.com/r/folder-interaction.json
Get In Touch component

A glossy contact pill. Hover and the label lifts away so a portrait and YOU merge, then Let’s Talk! writes in.

npx shadcn@latest add https://uselayouts.com/r/get-in-touch.json
Holographic Referral Card component

A dark invite card that tilts in 3D with the pointer. A holographic glow follows. Touch stays still. Tab for a quiet glow.

npx shadcn@latest add https://uselayouts.com/r/holographic-referral-card.json
Gooey Navbar component

A pill nav that melts into its neighbor when you hover — liquid bridges, active dot.

npx shadcn@latest add https://uselayouts.com/r/gooey-navbar.json
Infinite Canvas component

A free-panning product canvas that tiles forever — drag, scroll, and skim an endless grid of images and captions.

npx shadcn@latest add https://uselayouts.com/r/infinite-grid.json
Inline Edit component

An input that switches between read and edit modes.

npx shadcn@latest add https://uselayouts.com/r/inline-edit.json
Liquid Index component

A feature list whose hover badge is a WebGL liquid gradient that tracks the row.

npx shadcn@latest add https://uselayouts.com/r/liquid-index.json
Magnified Bento component

A bento card component with a draggable magnifying lens effect over scrolling chips.

npx shadcn@latest add https://uselayouts.com/r/magnified-bento.json
Morphing Input component

An input field that morphs between different states.

npx shadcn@latest add https://uselayouts.com/r/morphing-input.json
Multi Step Form component

A dynamic, animated multi-step form with validation.

npx shadcn@latest add https://uselayouts.com/r/multi-step-form.json
Overlapping Slider component

A full-width landing row of portrait cards. They sit flat until you move — then the card on the left scales back.

npx shadcn@latest add https://uselayouts.com/r/overlapping-slider.json
Perspective Text Scroll component

A polished example interaction built with React and Motion.

npx shadcn@latest add https://uselayouts.com/r/perspective-text-scroll.json
Photo Albums component

Tilted album stacks that expand into a shared-element photo grid.

npx shadcn@latest add https://uselayouts.com/r/photo-albums.json
Paper Shred Button component

Hover Delete and a page appears above it. Click and the page clips away while paper strips draw in below. After a few seconds it resets so you can shred again.

npx shadcn@latest add https://uselayouts.com/r/paper-shred-button.json
Polaroid Drag component

Draggable Polaroid photo gallery with realistic tilt, stacking, smooth animations, and customizable captions, sizes, and decorations.

npx shadcn@latest add https://uselayouts.com/r/polaroid-drag.json
Polaroid Stack component

Seven Polaroids sit in a pile. Hover and they fan into an arc from one corner.

npx shadcn@latest add https://uselayouts.com/r/polaroid-stack.json
Pop Tilt Cards component

Interactive tilt card deck with smooth hover animations, 3D popping effects, images, links, and customizable card styling.

npx shadcn@latest add https://uselayouts.com/r/pop-tilt-cards.json
Pricing Card component

A focused pricing card layout with clear hierarchy.

npx shadcn@latest add https://uselayouts.com/r/pricing-card.json
Prompt Box component

A collapsed chat composer that expands into a textarea with a model menu and send control.

npx shadcn@latest add https://uselayouts.com/r/prompt-box.json
Rolling Card Stack component

It’s a responsive, animated rolling card stack component built with React, TypeScript, Tailwind CSS, and Framer Motion. It supports desktop/mobile layouts, swi…

npx shadcn@latest add https://uselayouts.com/r/rolling-card-stack.json
Save Button component

A button with animated states for idle, loading, and success.

npx shadcn@latest add https://uselayouts.com/r/save-button.json
Scan Document component

Click Scan and a page unfolds, flips, and a glowing bar reads it. Done holds, then it resets.

npx shadcn@latest add https://uselayouts.com/r/scan-document.json
Scroll Split Cards component

One photograph that splits into three panels as you scroll, then flips to copy.

npx shadcn@latest add https://uselayouts.com/r/scroll-split-cards.json
Scroll Stack Deck component

Scroll-linked project cards that pin in the viewport and stack, scale, and settle as you move down the page.

npx shadcn@latest add https://uselayouts.com/r/scroll-stack-deck.json
Set Timer component

A dark timer pill that morphs into a minute wheel picker, then into a running timer with pause, cancel, and a rounded-rectangle progress border.

npx shadcn@latest add https://uselayouts.com/r/set-timer.json
Shake Testimonial Card component

An eye-catching testimonial card with playful animations.

npx shadcn@latest add https://uselayouts.com/r/shake-testimonial-card.json
Slide Subscribe component

Pick a billing period, then slide to start a trial.

npx shadcn@latest add https://uselayouts.com/r/slide-subscribe.json
Smooth Dropdown component

A dropdown menu with premium layout transitions.

npx shadcn@latest add https://uselayouts.com/r/smooth-dropdown.json
Stack Scroll Reveal component

Scroll-linked case-study cards that pin in the viewport and peel, scale, and fade as you move down the page.

npx shadcn@latest add https://uselayouts.com/r/stack-scroll-reveal.json
Stacked List component

An expandable list widget with a stacked layout and smooth morphing transitions.

npx shadcn@latest add https://uselayouts.com/r/stacked-list.json
Stacked Outline Text component

Heavy outlined type you can drag. Speed leaves a stacked white-on-black trail that springs back when you stop.

npx shadcn@latest add https://uselayouts.com/r/stacked-outline-text.json
Theme Toggle component

A physical switch with a dotted grip. Click and the knob slides across a recessed track.

npx shadcn@latest add https://uselayouts.com/r/theme-toggle.json
Tactile Button component

A liquid-glass rocker that tilts into its well when you press it.

npx shadcn@latest add https://uselayouts.com/r/tactile-button.json
Vertical Tabs component

A vertical tab interaction with smooth content switching.

npx shadcn@latest add https://uselayouts.com/r/vertical-tabs.json
Wheel Carousel component

This component creates a smooth wheel-style carousel with photos and selectable items. It supports drag, scroll, keyboard controls, snapping, momentum, themes,…

npx shadcn@latest add https://uselayouts.com/r/wheel-carousel.json