uselayouts

A micro-interaction UI library for professionals.

uselayouts provides free premium animated React components and micro-interactions built with Framer Motion and Tailwind CSS. Designed to integrate seamlessly with Shadcn UI, it helps you bring your interfaces to life with ease. <br /> <br /> <a href="https://vercel.com/oss"> <img alt="Vercel OSS Program" src="https://vercel.com/oss/program-badge-2026.svg" /> </a>

Why uselayouts?

People don’t fall in love with components. They fall in love with how something feels. uselayouts focuses on the fine details of interaction:

• Premium Animations: Built with Framer Motion for buttery smooth transitions.
• Shadcn Compatible: Designed to work with your existing Shadcn UI setup.
• Micro-interactions: Focused on the small details that make a big difference in UX.
• Copy & Paste: Easy to integrate into any React project.

Installation

You can add components to your project using the Shadcn CLI:

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

Replace 3d-book with any component name from our documentation.

Features

• Accessible: Built on top of accessible primitives.
• Customizable: Fully stylable with Tailwind CSS classes.

Development

If you'd like to run the documentation site locally:

1. Clone the repository:

   git clone https://github.com/iurvish/uselayouts.git
   

2. Install dependencies:

   yarn install
   

3. Run the development server:

   yarn dev
   

Registry Build

To build the component registry:

yarn build:registry

Community

• Website: uselayouts.com
• Twitter/X: @0xUrvish
• GitHub: iurvish/uselayouts

License

Built by Urvish Mali. Licensed under the MIT License.