# [useLayouts](<https://uselayouts.com/>)

Free animated React components and micro-interactions built with Framer Motion and Tailwind CSS, designed to work with shadcn/ui.

Free·React·shadcn·UI Components·Animation·Open Source

Free·React·shadcn·UI Components·Animation+1

![useLayouts preview 1](<https://creatorstoolbox.com/images/galleries/uselayouts-9d56e9ef00fe89c6a7d82480834d17d112aa03c1ce88b1a6be0dcbb7ccc9a61b.jpg>)

![useLayouts preview 2](<https://creatorstoolbox.com/images/previews/uselayouts-c7f77f092594a8442249806597df1f1300660925fd9ecebc587e3115396a6200.png>)

## What is useLayouts?

useLayouts is an open-source library of animated React components and micro-interactions for building polished interfaces. Components are built with Framer Motion and Tailwind CSS, work with shadcn/ui, and can be added to a project with the shadcn CLI. The library includes interactive patterns for layouts, navigation, forms, cards, and more, with editable source you can customize.

## Features

- Animated React components and micro-interactions

- Built with Framer Motion and Tailwind CSS

- Designed to integrate with shadcn/ui

- Add components to a project with the shadcn CLI

- Editable source code you can customize

## FAQs

Common questions about useLayouts

What is useLayouts?

An open-source library of animated React components and micro-interactions for building polished interfaces.

How do I install a component?

Use the shadcn CLI with a component registry URL from useLayouts.

Which technologies does it use?

The components use React, Framer Motion, and Tailwind CSS, and are designed to work with shadcn/ui.

Is useLayouts free?

Yes. The source code is available under the MIT license.

Similar Launches

[![Arc UI](<https://www.google.com/s2/favicons?domain=uiarc.dev&sz=128>)

Arc UI

Motion-rich React components and complete UI blocks for shadcn and Next.js, with live examples and AI-readable docs.](<https://creatorstoolbox.com/resources/arc-ui>)[![Loading.dev](<https://loading.dev/favicon.ico>)

Loading.dev

A free, open-source collection of animated loading indicators for React, with live previews and copyable usage examples.](<https://creatorstoolbox.com/resources/loading-dev>)[![React Bits](<https://reactbits.dev/favicon.ico>)

React Bits

An open-source collection of 200+ animated, interactive React components and micro-interactions.](<https://creatorstoolbox.com/resources/react-bits>)[![Dot Matrix](<https://dotmatrix.zzzzshawn.cloud/icon.svg>)

Dot Matrix

Open-source React component library of 55+ expressive dot-matrix loaders — install via the shadcn registry and own the code locally.](<https://creatorstoolbox.com/resources/dotmatrix>)[![beUI](<https://www.google.com/s2/favicons?domain=beui.dev&sz=128>)

beUI

Free, open-source animated components for React and Next.js — 108 motion primitives and blocks built with Motion and Tailwind, installable via the shadcn CLI.](<https://creatorstoolbox.com/resources/beui>)[![HeroUI](<https://www.google.com/s2/favicons?domain=heroui.com&sz=128>)

HeroUI

Beautiful, accessible React UI components built on React Aria and Tailwind CSS v4 — the modern alternative to MUI, Chakra UI, and shadcn/ui.](<https://creatorstoolbox.com/resources/heroui>)

---
Canonical source: https://creatorstoolbox.com/resources/uselayouts