# useLayouts

> Free animated React components built with Framer Motion and Tailwind CSS

useLayouts is an open-source library of animated React components designed for quick copy-pasting. It combines Tailwind CSS and Framer Motion to provide micro-interactions, layout blocks, and navigation elements. Developers can preview components in the browser and adapt the unbundled code directly in their projects.

Website: https://uselayouts.com/

## What it is for

- Add micro-interactions like tactile buttons and animated theme toggles to a web app
- Assemble modern landing page layouts using pre-made bento grids and hero sections
- Implement animated navigation patterns like interactive tabs, sidebars, and menus

## Features

- Copy-and-paste source code with zero library lock-in
- Built using React, TypeScript, Tailwind CSS, and Framer Motion
- Interactive live component previews directly on the site
- Categories covering layouts, navigation, micro-interactions, and general UI
- Compatible with shadcn/ui and Radix UI ecosystems
- Part of the Vercel Open Source Software Program

## Pricing

Free and open source

## Details

- Type: Website
- Category: [Development](https://xiry.app/topics/development.md)
- Topic: [UI Components](https://xiry.app/topics/development/ui-components.md)
- Open source: yes
- Platforms: Web, Code library
- For: React and Next.js frontend developers
- Alternative to: Aceternity UI, Magic UI, shadcn/ui
- Tags: react, tailwindcss, framer motion, ui library, micro interactions, components

## Why it was saved

- [@voidyaps, 23 September 2026](https://x.com/voidyaps/status/2102817538229063855): Ready-made micro-interaction components; part of a vetted 'goated' list.

## Compare

- [Alternatives to Aceternity UI](https://xiry.app/alternatives/aceternity-ui.md)
- [Alternatives to Magic UI](https://xiry.app/alternatives/magic-ui.md)
- [Alternatives to shadcn/ui](https://xiry.app/alternatives/shadcn-ui.md)

## Related

- [shadcn/ui](https://xiry.app/resources/shadcn-ui-1902): Copy-paste React UI components built with Tailwind CSS and Radix primitives. (Website, Open source)
- [Efferd](https://xiry.app/resources/efferd): Pre-built, responsive shadcn/ui blocks and layouts for React applications (Web app, Freemium)
- [Motion](https://xiry.app/resources/motion): Open-source animation library for React, Vue, and vanilla JavaScript (Website, Freemium)
- [React Bits](https://xiry.app/resources/react-bits): Open-source animated and interactive React UI components and backgrounds (Website, Freemium)
- [21st.dev](https://xiry.app/resources/21st-dev): Curated directory of crafted React, Tailwind, and shadcn UI components. (Website, Freemium)
- [lucide-animated](https://xiry.app/resources/lucide-animated): Open-source animated React icons built with Lucide and Motion (Web app, Open source)

Updated 10 October 2026. Page: https://xiry.app/resources/uselayouts

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.