https://github.com/iurvish/uselayouts
Free premium animated React components and micro-interactions built with Framer Motion and Tailwind CSS
https://github.com/iurvish/uselayouts
animated-components components-library-web-development nextjs-ui-components open-source open-source-ui-library shadcn-ui
Last synced: 5 months ago
JSON representation
Free premium animated React components and micro-interactions built with Framer Motion and Tailwind CSS
- Host: GitHub
- URL: https://github.com/iurvish/uselayouts
- Owner: iurvish
- License: mit
- Created: 2025-12-14T07:44:47.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2026-01-06T17:10:38.000Z (5 months ago)
- Last Synced: 2026-01-08T08:19:51.655Z (5 months ago)
- Topics: animated-components, components-library-web-development, nextjs-ui-components, open-source, open-source-ui-library, shadcn-ui
- Language: TypeScript
- Homepage: https://uselayouts.com
- Size: 5.72 MB
- Stars: 95
- Watchers: 1
- Forks: 8
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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.
## 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).