# uselayouts

**A micro-interaction UI library for professionals.**

[uselayouts](https://uselayouts.com) 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>

![uselayouts Banner](https://uselayouts.com/og.jpg)

## 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:

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

Replace `3d-book` with any component name from our [documentation](https://uselayouts.com/docs/introduction).

## 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:
   ```bash
   git clone https://github.com/iurvish/uselayouts.git
   ```
2. Install dependencies:
   ```bash
   yarn install
   ```
3. Run the development server:
   ```bash
   yarn dev
   ```

## Registry Build

To build the component registry:

```bash
yarn build:registry
```

## Community

- **Website**: [uselayouts.com](https://uselayouts.com)
- **Twitter/X**: [@0xUrvish](https://x.com/0xUrvish)
- **GitHub**: [iurvish/uselayouts](https://github.com/iurvish/uselayouts)

## License

Built by [Urvish Mali](https://x.com/0xUrvish).
Licensed under the [MIT License](LICENSE).