Animate UI

Overview

Animate UI is an open-source component registry providing animated micro-interactions, interactive buttons, dynamic badges, and kinetic icon animations for React and Tailwind CSS.

Key Features

• Animated Icons & Badges: SVG icons with built-in hover and loop micro-animations.
• shadcn-Compatible Registry: Add components instantly via CLI into your local codebase.
• Tailwind CSS & Motion Native: 60fps hardware-accelerated animations.
• Full TypeScript Type Safety: Typed props and parameters across all components.

Installation & Quick Start

npx shadcn@latest add https://animate-ui.com/r/magnetic-button.json

import { MagneticButton } from '@/components/ui/magnetic-button';

export default function App() {
  return <MagneticButton>Animate UI</MagneticButton>;
}

Why Choose Animate UI?

• Best for: SaaS products, landing pages, and interactive apps seeking charming micro-interactions.
• Not suitable for: Static multi-page sites with zero interactive motion requirements.