---
name: "@uselayouts"
slug: "uselayouts"
description: "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."
category: "Animated components"
tags: ["3d", "accessibility", "aesthetic", "ai", "animation", "buttons", "cards", "charts", "dashboard", "editor", "forms", "glassmorphism", "marketing", "media", "mobile", "navigation", "overlays", "theming"]
framework: "react"
license: "MIT"
author: "iurvish"
website: "https://uselayouts.com"
github: "https://github.com/iurvish/uselayouts"
registry: "https://uselayouts.com/r/registry.json"
pro: false
pro_url: null
github_stars: 704
component_count: 64
generated_at: "2026-10-27T06:34:08.542Z"
---

# @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.

## Links

- Website: https://uselayouts.com
- GitHub: https://github.com/iurvish/uselayouts
- Registry JSON: https://uselayouts.com/r/registry.json
- Directory page: https://sh4dcn.netlify.app/registry/uselayouts
- This file: https://sh4dcn.netlify.app/md/uselayouts.md

## Install

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

## Components (64)

| name | type | description | install |
| --- | --- | --- | --- |
| 3d-book | registry:component | An interactive 3D book component with page flip animations. | `npx shadcn@latest add https://uselayouts.com/r/3d-book.json` |
| accessible-action | registry: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 | registry: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 | registry: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 | registry:component | A collection of items with smooth layout transitions and animations. | `npx shadcn@latest add https://uselayouts.com/r/animated-collection.json` |
| bento-card | registry:component | An interactive bento card with animated tabs and workspace preview. | `npx shadcn@latest add https://uselayouts.com/r/bento-card.json` |
| bottom-menu | registry:component | A floating bottom navigation menu with smooth interactions. | `npx shadcn@latest add https://uselayouts.com/r/bottom-menu.json` |
| bucket | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry:component | A custom day picker component with smooth animations. | `npx shadcn@latest add https://uselayouts.com/r/day-picker.json` |
| delete-button | registry:component | A confirmation button with smooth icon transitions. | `npx shadcn@latest add https://uselayouts.com/r/delete-button.json` |
| discover-button | registry:component | An interactive button with expanding discovery state. | `npx shadcn@latest add https://uselayouts.com/r/discover-button.json` |
| discrete-tabs | registry:component | A tab component with discrete sliding animations. | `npx shadcn@latest add https://uselayouts.com/r/discrete-tabs.json` |
| drawer-buttons | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry:component | A photo gallery with smooth item expansion. | `npx shadcn@latest add https://uselayouts.com/r/expandable-gallery.json` |
| feature-carousel | registry:component | A smooth carousel for showcasing product features. | `npx shadcn@latest add https://uselayouts.com/r/feature-carousel.json` |
| filter-interaction | registry:component | Interactive list items with hover and focus effects. | `npx shadcn@latest add https://uselayouts.com/r/filter-interaction.json` |
| fluid-expanding-grid | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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-grid | registry: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 | registry:component | An input that switches between read and edit modes. | `npx shadcn@latest add https://uselayouts.com/r/inline-edit.json` |
| liquid-index | registry: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 | registry: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 | registry:component | An input field that morphs between different states. | `npx shadcn@latest add https://uselayouts.com/r/morphing-input.json` |
| multi-step-form | registry:component | A dynamic, animated multi-step form with validation. | `npx shadcn@latest add https://uselayouts.com/r/multi-step-form.json` |
| overlapping-slider | registry: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 | registry:component | A polished example interaction built with React and Motion. | `npx shadcn@latest add https://uselayouts.com/r/perspective-text-scroll.json` |
| photo-albums | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry:component | A focused pricing card layout with clear hierarchy. | `npx shadcn@latest add https://uselayouts.com/r/pricing-card.json` |
| prompt-box | registry: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 | registry: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 | registry:component | A button with animated states for idle, loading, and success. | `npx shadcn@latest add https://uselayouts.com/r/save-button.json` |
| scan-document | registry: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 | registry: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 | registry: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 | registry: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 | registry:component | An eye-catching testimonial card with playful animations. | `npx shadcn@latest add https://uselayouts.com/r/shake-testimonial-card.json` |
| slide-subscribe | registry:component | Pick a billing period, then slide to start a trial. | `npx shadcn@latest add https://uselayouts.com/r/slide-subscribe.json` |
| smooth-dropdown | registry:component | A dropdown menu with premium layout transitions. | `npx shadcn@latest add https://uselayouts.com/r/smooth-dropdown.json` |
| stack-scroll-reveal | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry:component | A vertical tab interaction with smooth content switching. | `npx shadcn@latest add https://uselayouts.com/r/vertical-tabs.json` |
| wheel-carousel | registry: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` |

## For AI agents

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