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.

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.

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.

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

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

To build the component registry:

yarn build:registry

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

Built by Urvish Mali. Licensed under the MIT License.