useLayouts
64 free animated React components with source installation through the shadcn registry
useLayouts is a free MIT library of animated React components by Urvish Mali. Its public shadcn registry now contains 64 components. They cover tabs, buttons, galleries, folders, forms, navigation, and pointer interactions. Examples include a page-turning 3D book, a confidential folder, a magnifying bento card, a dynamic toolbar, and a draggable coverflow. The stack uses React, Tailwind CSS, Motion, and shadcn/ui. Installation copies component source into the project and adds its dependencies. The current documentation explains the @uselayouts namespace and links to live previews and component source. Sponsorship supports the library, with no paid tier shown. Use a selected interaction where the product needs it, then match its motion and styling to the app.
npx shadcn@latest add https://uselayouts.com/r/3d-book.jsonRead https://uselayouts.com/r/registry.json for the current 64-item catalog. The introduction now lives at https://uselayouts.com/docs. Component pages use /docs/components/{name}. The old /components path is no longer the catalog. The documented shadcn namespace is @uselayouts, with https://uselayouts.com/r/{name}.json in components.json. You can also install an item by its full registry URL. Use a few selected components alongside the main design system. Inspect each item for dependencies and client-side behavior. The checked 3D Book item requires motion, clsx, and tailwind-merge. Its source does not use useReducedMotion, so check reduced-motion behavior before release. The MIT source is public on GitHub.
Why it is here. The registry supplies distinct motion patterns with editable source. The 64-item catalog now covers more gallery, navigation, folder, and button interactions than the earlier release.
- 64 components in the public shadcn registry
- 3D book, folder interactions, and draggable galleries
- Motion animations with editable React source
- Documented @uselayouts namespace
- MIT source with optional sponsorship
Verified 2026-10-04. HTTP 200. Checked https://uselayouts.com/, /docs, /docs/components/3d-book, /r/registry.json, and /r/3d-book.json on 2026-10-04. The registry returned 64 registry:component items. The introduction documents the @uselayouts namespace and source installation. The 3D Book item contains source and lists motion, clsx, and tailwind-merge as dependencies. https://github.com/iurvish/uselayouts and its LICENSE file report MIT. The GitHub API reports 661 stars and last activity on 2026-10-03. The existing Index preview is present and decodes at 1200 by 650 pixels.
