Skip to content
Index730 resources
useLayouts

useLayouts

26 Motion-driven micro-interaction components installable via the shadcn CLI

Tier B · UsefulRegistryAnimation LibraryComponent Libraryuselayouts.com

(Visit uselayouts.com ↗)(Docs)(Repository)(Registry)
Preview image from uselayouts.com

useLayouts is a small, opinionated shadcn registry of 26 React components whose whole point is the interaction, not the markup — a 3D book that flips pages, a magnifying lens dragged over a bento card, a toolbar that resizes to its contents, an input that morphs between states. Everything is built on Motion (Framer Motion) plus Tailwind and layered over shadcn/ui, and installs one item at a time with the standard shadcn CLI. It is free and MIT-licensed, funded by sponsorship rather than a pro tier. Use it when a page needs one memorable moment rather than a full component system.

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

For an agent

Read `https://uselayouts.com/r/registry.json` for the exact 26-item catalog — the marketing pages and `/components` render as a JS shell and `/docs/*` paths 404. This is a garnish library, not a foundation: install one or two items where the user wants a moment of delight (multi-step-form, 3d-book, magnified-bento, dynamic-toolbar) and keep shadcn/ui or a larger registry as the base system. Every item pulls in `motion`, `clsx` and `tailwind-merge` and is client-side, so gate them behind a `prefers-reduced-motion` check because the registry does not do that for you.

Why it is here. Most animated-component registries pad their counts with the same twenty gradient buttons; useLayouts stays small and each item is a genuinely distinct interaction you would otherwise spend a day building. Being MIT with no pro tier makes it safe to drop into client work.

Install command, framework, licence and component list.

Facts

License
MIT
Pricing
Free, Open source, Sponsor or ad supported
Framework
React, Next.js
Styling
Tailwind CSS, CSS custom properties
Distribution
shadcn registry, CLI installer, Copy-paste snippet, GitHub repository
Platform
Web
Content type
Code
Agent readiness
Machine-readable registry item, CLI installable, Copy-paste ready code, Readable open source, Client-rendered shell
Accessibility
Unknown
Maturity
Actively maintained
Pricing detail
Free and MIT; optional GitHub sponsorship
GitHub stars
443

Components it ships

26 total
CardBento GridGridTabsDropdown MenuCarouselImage GalleryListInline EditFormProgress StepperToolbarDockButtonText InputCalendarDate PickerFile TreeEmpty StatePricing TableQuoteTransitionAnimationDrag And DropHover EffectSpinner

Helps you build

9
Multi Step FormHomepageFeaturesPricing WebsiteTestimonialsEmpty StateFiltering ItemsSingle Item DetailUploading Media

Notable for

  • 26 hand-built micro-interactions
  • 3D book with page flip
  • magnifying-lens bento card
  • animated multi-step form
  • MIT, no paid tier

Provenance

Verified 2026-08-15. HTTP 200. https://uselayouts.com, https://uselayouts.com/components (404), https://uselayouts.com/registry.json (404), https://uselayouts.com/r/registry.json (full 26-item parse), https://uselayouts.com/r/3d-book.json (200), GitHub API search + repos/iurvish/uselayouts

Also in Motion & Interaction

6
uselayouts.comTier B