AniUI

Overview

AniUI is a community-driven, copy-paste animated component library built with React, Tailwind CSS, and Framer Motion. It provides over 100 ready-to-use micro-interactions, interactive cards, animated buttons, glowing borders, and particle backgrounds designed to make web apps stand out.

Key Features

• ⚡ 100+ Production-Ready Animated Components: Spanning interactive buttons, glassmorphism cards, animated tab bars, dynamic text effects, and loaders.
• 📋 Zero-Install Copy & Paste: No heavy npm runtime package; simply copy the clean TypeScript and Tailwind component code straight into your codebase.
• 🎨 Tailwind & Framer Motion Powered: Seamlessly customized using familiar Tailwind utility classes, CSS variables, and spring physics.
• 🌐 Modern Framework Friendly: Drop-in compatibility with Next.js App Router, Vite, Astro, and Remix.

Installation & Quick Start

npm install framer-motion clsx tailwind-merge lucide-react

import React from 'react';
import { motion } from 'framer-motion';

// Example: Animated Glowing Shimmer Button from AniUI
export function ShimmerButton({ children }: { children: React.ReactNode }) {
  return (
    <motion.button
      whileHover={{ scale: 1.04 }}
      whileTap={{ scale: 0.96 }}
      className="relative inline-flex items-center justify-center rounded-xl bg-gradient-to-r from-indigo-500 to-purple-600 px-6 py-3 font-medium text-white shadow-lg shadow-indigo-500/25 transition-all hover:shadow-indigo-500/40"
    >
      {children}
    </motion.button>
  );
}

Why Choose AniUI?

• Landing Pages & Marketing Sites: Quickly add high-polish animations and eye-catching interactions without spending days writing custom motion choreography.
• Modern Developer Experience: Full TypeScript typing and zero vendor lock-in give developers complete code ownership.