Development · Website
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.
What it's 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
- Topic
- UI Components
- 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: Ready-made micro-interaction components; part of a vetted 'goated' list.
Compare
Related
Copy-paste React UI components built with Tailwind CSS and Radix primitives.
Pre-built, responsive shadcn/ui blocks and layouts for React applications
Open-source animation library for React, Vue, and vanilla JavaScript
Open-source animated and interactive React UI components and backgrounds
Curated directory of crafted React, Tailwind, and shadcn UI components.
Open-source animated React icons built with Lucide and Motion
Updated