Introduction

Animate UI is a distribution of React components built with Tailwind CSS and Motion, based on the shadcn registry and inspired by shadcn/ui and Magic UI. Our goal is to help anyone add tasteful, accessible, Motion‑powered animation to their UI while keeping sites fast and maintainable.

Not a library—an open component distribution

Like shadcn/ui, Animate UI is not a typical install‑from‑NPM library. It’s an open collection you can copy, modify, and customize directly in your codebase. This “open code” approach gives you maximum flexibility without wrapper overhead or styling workarounds.

What’s included

1. Primitives (animated): Building blocks with animation baked in. Authored by Animate UI or ported from popular primitive libraries (Radix UI, Base UI, Headless UI).
2. Components: Essential UI pieces with baseline styles inspired by shadcn/ui, designed to integrate easily into your interfaces and built on the animated primitives.
3. Icons: Animated Lucide icons.

Why Animate UI?

1. Open source & copy‑first: Direct access to source so you can adapt components at their core to your design system.
2. Animation‑first, powered by Motion: Consistent, composable motion patterns that make interfaces feel modern and engaging.
3. Performance & accessibility: Sensible defaults and patterns that keep your site fast by default.
4. Style‑agnostic: Not prescriptive about look and feel; baseline styles are minimal and easy to restyle.
5. Multi‑primitive support: We aim to support and port components across multiple primitive libraries (Radix UI, Base UI, Headless UI).
6. Complementary to Magic UI and shadcn/ui: Works alongside these projects, filling the animation‑focused gap.