sh4dcn
Registries
ActiveFeaturedAnimated components704

@uselayouts

Animated components · MIT · data updated 2026-10-27

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.

WebsiteDocsGitHubComponents folderAgent brief (.md)
@uselayouts preview
3daccessibilityaestheticaianimationbuttonscardschartsdashboardeditorformsglassmorphismmarketingmediamobilenavigationoverlaystheming

Install

npx shadcn@latest add https://uselayouts.com/r/registry.json

Health

StatusActive
Last commit1 week ago
LicenseMIT
Open issues3
ArchivedNo
Stars704

Components (64)

3d-bookaccessible-actionaccordionosanalog-stickanimated-collectionbento-cardbottom-menubucketcard-folderclient-cardconfidential-foldercorner-videocoverflow-dragcreate-menucurve-drawerday-pickerdelete-buttondiscover-buttondiscrete-tabsdrawer-buttonsdynamic-grid-gallerydynamic-toolbareditorial-deckempty-testimonialexpandable-galleryfeature-carouselfilter-interactionfluid-expanding-gridfocus-testimonialsfolder-interactionget-in-touchholographic-referral-cardgooey-navbarinfinite-gridinline-editliquid-indexmagnified-bentomorphing-inputmulti-step-formoverlapping-sliderperspective-text-scrollphoto-albumspaper-shred-buttonpolaroid-dragpolaroid-stackpop-tilt-cardspricing-cardprompt-boxrolling-card-stacksave-buttonscan-documentscroll-split-cardsscroll-stack-deckset-timershake-testimonial-cardslide-subscribesmooth-dropdownstack-scroll-revealstacked-liststacked-outline-text
Components: 3d-book, accessible-action, accordionos, analog-stick, animated-collection, bento-card, bottom-menu, bucket, card-folder, client-card, confidential-folder, corner-video, coverflow-drag, create-menu, curve-drawer, day-picker, delete-button, discover-button, discrete-tabs, drawer-buttons, dynamic-grid-gallery, dynamic-toolbar, editorial-deck, empty-testimonial, expandable-gallery, feature-carousel, filter-interaction, fluid-expanding-grid, focus-testimonials, folder-interaction, get-in-touch, holographic-referral-card, gooey-navbar, infinite-grid, inline-edit, liquid-index, magnified-bento, morphing-input, multi-step-form, overlapping-slider, perspective-text-scroll, photo-albums, paper-shred-button, polaroid-drag, polaroid-stack, pop-tilt-cards, pricing-card, prompt-box, rolling-card-stack, save-button, scan-document, scroll-split-cards, scroll-stack-deck, set-timer, shake-testimonial-card, slide-subscribe, smooth-dropdown, stack-scroll-reveal, stacked-list, stacked-outline-text, theme-toggle, tactile-button, vertical-tabs, wheel-carousel

Preview

Live sandbox previews render component source client-side. Where a component can’t be rendered standalone, sh4dcn falls back to its source and install command.

@uselayouts · 3d-book

npx shadcn@latest add https://uselayouts.com/r/3d-book.json
View source