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.

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.