---
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", "aesthetic", "animation", "buttons", "cards", "dashboard", "forms", "marketing", "media", "navigation"]
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: 404
component_count: 26
generated_at: "2026-07-28T08:59:05.895Z"
---

# @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.vercel.app/registry/uselayouts
- This file: https://sh4dcn.vercel.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 (26)

| 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` |
| 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` |
| bottom-menu | registry:component | A floating bottom navigation menu with smooth interactions. | `npx shadcn@latest add https://uselayouts.com/r/bottom-menu.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` |
| 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` |
| 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` |
| 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` |
| inline-edit | registry:component | An input that switches between read and edit modes. | `npx shadcn@latest add https://uselayouts.com/r/inline-edit.json` |
| list-item | registry:component | Interactive list items with hover and focus effects. | `npx shadcn@latest add https://uselayouts.com/r/list-item.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` |
| pricing-card | registry:component | A focused pricing card layout with clear hierarchy. | `npx shadcn@latest add https://uselayouts.com/r/pricing-card.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` |
| smooth-dropdown | registry:component | A dropdown menu with premium layout transitions. | `npx shadcn@latest add https://uselayouts.com/r/smooth-dropdown.json` |
| status-button | registry:component | A button with animated states for idle, loading, and success. | `npx shadcn@latest add https://uselayouts.com/r/status-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` |
| 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` |
| 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` |
| 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` |
| 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` |
| 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` |
| 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` |

## For AI agents

```text
You are adding components from @uselayouts to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.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.vercel.app/json (library slug: uselayouts).
```