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

26 components react shadcn-cli MIT

website ↗ github ↗ registry ↗

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

26 total

3D Book component

An interactive 3D book component with page flip animations.

npx shadcn@latest add https://uselayouts.com/r/3d-book.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

Bottom Menu component

A floating bottom navigation menu with smooth interactions.

npx shadcn@latest add https://uselayouts.com/r/bottom-menu.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

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

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

Folder Interaction component

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

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

Inline Edit component

An input that switches between read and edit modes.

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

List Item component

Interactive list items with hover and focus effects.

npx shadcn@latest add https://uselayouts.com/r/list-item.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

Pricing Card component

A focused pricing card layout with clear hierarchy.

npx shadcn@latest add https://uselayouts.com/r/pricing-card.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

Smooth Dropdown component

A dropdown menu with premium layout transitions.

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

Status Button component

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

npx shadcn@latest add https://uselayouts.com/r/status-button.json

Vertical Tabs component

A vertical tab interaction with smooth content switching.

npx shadcn@latest add https://uselayouts.com/r/vertical-tabs.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

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

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

Bento Card component

An interactive bento card with animated tabs and workspace preview.

npx shadcn@latest add https://uselayouts.com/r/bento-card.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

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