100+ animated React components (Aceternity UI) for Next.js with Tailwind. Use for hero sections, parallax, 3D effects, or encountering animation, shadcn CLI integration errors.
/plugin marketplace add secondsky/claude-skills/plugin install aceternity-ui@claude-skillsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
references/component-catalog.mdreferences/quick-start.mdAceternity UI is a premium, production-ready React component library designed for Next.js applications. It provides 100+ beautifully animated and interactive components built with Tailwind CSS and Framer Motion. Components are installed via the shadcn CLI and can be customized directly in your codebase.
Key Features:
Prerequisites:
For New Projects:
# Create Next.js project (bun preferred)
bunx create-next-app@latest my-app
# or: npx create-next-app@latest my-app
# or: pnpm create next-app@latest my-app
cd my-app
# Select these options:
# - TypeScript: Yes
# - ESLint: Yes
# - Tailwind CSS: Yes
# - src/ directory: Optional
# - App Router: Yes (recommended)
# - Import alias: @/* (default)
Initialize Aceternity UI via shadcn CLI:
# Using bun (preferred)
bunx --bun shadcn@latest init
# Using npm
npx shadcn@latest init
# Using pnpm
pnpm dlx shadcn@latest init
# During setup:
# - Style: New York (recommended)
# - Color: Zinc (or your preference)
# - CSS variables: Yes (recommended)
Configure Registry:
After initialization, update components.json to add Aceternity registry:
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "new-york",
"rsc": true,
"tsx": true,
"tailwind": {
"config": "tailwind.config.ts",
"css": "app/globals.css",
"baseColor": "zinc",
"cssVariables": true
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils"
},
"registries": {
"@aceternity": "https://ui.aceternity.com/registry/{name}.json"
}
}
Using shadcn CLI 3.0+ (Namespaced Registry):
# Install specific component
bunx shadcn@latest add @aceternity/background-beams
# or: npx shadcn@latest add @aceternity/background-beams
# or: pnpm dlx shadcn@latest add @aceternity/background-beams
# Component will be added to: components/ui/background-beams.tsx
Manual Installation:
If the registry method doesn't work, install manually:
bun add motion clsx tailwind-merge
# or: npm install motion clsx tailwind-merge
lib/utils.ts:import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
Create stunning animated backgrounds and visual effects for hero sections and full-page layouts.
Key Components:
Usage Example:
"use client";
import { BackgroundBeams } from "@/components/ui/background-beams";
export default function HeroSection() {
return (
<div className="h-screen w-full relative">
<div className="max-w-4xl mx-auto z-10 relative p-8">
<h1 className="text-5xl font-bold">Welcome</h1>
<p className="text-xl mt-4">Beautiful animated backgrounds</p>
</div>
<BackgroundBeams />
</div>
);
}
When to Use:
Interactive cards with hover effects, animations, and 3D transformations.
Key Components:
Usage Example:
"use client";
import { CardBody, CardContainer, CardItem } from "@/components/ui/3d-card";
export function ProductCard() {
return (
<CardContainer>
<CardBody className="bg-gray-50 rounded-xl p-6">
<CardItem translateZ="50" className="text-2xl font-bold">
Product Title
</CardItem>
<CardItem translateZ="60" as="p" className="text-sm mt-2">
Product description goes here
</CardItem>
<CardItem translateZ="100" className="w-full mt-4">
<img src="/product.jpg" className="rounded-xl" alt="Product" />
</CardItem>
</CardBody>
</CardContainer>
);
}
When to Use:
Create engaging scroll-based animations and parallax effects.
Key Components:
Usage Example:
import { StickyScroll } from "@/components/ui/sticky-scroll-reveal";
const content = [
{
title: "Feature One",
description: "Description of feature one...",
content: <div>Visual content here</div>
},
// More items...
];
export function Features() {
return <StickyScroll content={content} />;
}
When to Use:
Animated text effects for headings, titles, and interactive typography.
Key Components:
Usage Example:
import { TypewriterEffect } from "@/components/ui/typewriter-effect";
const words = [
{ text: "Build" },
{ text: "amazing" },
{ text: "websites", className: "text-blue-500" }
];
export function Hero() {
return <TypewriterEffect words={words} />;
}
When to Use:
Enhanced button components with animations and effects.
Key Components:
Usage Example:
import { MovingBorder } from "@/components/ui/moving-border";
export function CTAButton() {
return (
<MovingBorder duration={2000} className="p-4">
<span>Get Started</span>
</MovingBorder>
);
}
Modern navigation menus and tab systems.
Key Components:
Enhanced form inputs and file upload components.
Key Components:
Usage Example:
import { PlaceholdersAndVanishInput } from "@/components/ui/placeholders-and-vanish-input";
export function SearchBar() {
const placeholders = [
"Search for anything...",
"What are you looking for?",
"Type to search..."
];
return (
<PlaceholdersAndVanishInput
placeholders={placeholders}
onChange={(e) => console.log(e.target.value)}
onSubmit={(e) => {
e.preventDefault();
console.log("submitted");
}}
/>
);
}
Modal dialogs and tooltips with animations.
Key Components:
Usage Example:
import { Modal, ModalBody, ModalContent, ModalTrigger } from "@/components/ui/animated-modal";
export function BookingModal() {
return (
<Modal>
<ModalTrigger className="bg-black text-white px-4 py-2 rounded-md">
Book Now
</ModalTrigger>
<ModalBody>
<ModalContent>
<h2>Booking Details</h2>
{/* Modal content */}
</ModalContent>
</ModalBody>
</Modal>
);
}
Image sliders and carousel components.
Key Components:
Grid layouts and container components.
Key Components:
Components for displaying data and comparisons.
Key Components:
Cursor-following effects and interactions.
Key Components:
3D visual effects using CSS transforms.
Key Components:
Loading animations and progress indicators.
Key Components:
Pre-built section templates.
Key Components:
All Aceternity components support dark mode via Tailwind's dark mode classes:
<div className="bg-white dark:bg-black text-black dark:text-white">
{/* Content */}
</div>
Components are responsive by default. Use Tailwind's responsive prefixes:
<h1 className="text-2xl md:text-4xl lg:text-6xl">
Responsive Heading
</h1>
Components can be combined for complex layouts:
import { BackgroundBeams } from "@/components/ui/background-beams";
import { TypewriterEffect } from "@/components/ui/typewriter-effect";
import { MovingBorder } from "@/components/ui/moving-border";
export default function Hero() {
return (
<div className="h-screen relative">
<div className="z-10 relative flex flex-col items-center justify-center h-full">
<TypewriterEffect words={words} />
<MovingBorder>
<button>Get Started</button>
</MovingBorder>
</div>
<BackgroundBeams />
</div>
);
}
Use "use client" directive - Aceternity components use Framer Motion, requiring client-side rendering:
"use client";
import { Component } from "@/components/ui/component";
Lazy load heavy components:
import dynamic from 'next/dynamic';
const HeavyBackground = dynamic(
() => import('@/components/ui/background-beams'),
{ ssr: false }
);
Add ARIA labels:
<button aria-label="Open menu">
<MenuIcon />
</button>
Ensure keyboard navigation:
<div role="button" tabIndex={0} onKeyDown={handleKeyDown}>
Interactive element
</div>
Override styles using className:
<BackgroundBeams className="opacity-50" />
Modify component source directly - Since components are copied to your project, you can edit them:
// components/ui/background-beams.tsx
export function BackgroundBeams({ className, myCustomProp }: Props) {
// Customize as needed
}
Use TypeScript for prop types:
interface CardProps {
title: string;
description: string;
image?: string;
}
export function Card({ title, description, image }: CardProps) {
// Component implementation
}
1. "Module not found: motion"
bun add motion
# or: npm install motion
2. "cn is not defined"
Ensure lib/utils.ts exists with the cn helper function.
3. Components not animating Verify "use client" directive is at the top of the file.
4. Tailwind classes not working
Ensure Tailwind is configured and globals.css imports Tailwind directives:
@tailwind base;
@tailwind components;
@tailwind utilities;
5. Dark mode not working
Check tailwind.config.ts has darkMode: "class" configured.
This skill provides significant token savings by:
Estimated savings: ~10k tokens (65-70% reduction) per implementation
Errors prevented:
Load reference files based on task context:
| If User Asks About... | Load This Reference |
|---|---|
| New project setup, installation, getting started | references/quick-start.md (465 lines) |
| Finding specific components, component categories, CLI commands | references/component-catalog.md (635 lines) |
| Usage examples, patterns, troubleshooting | Main SKILL.md (this file) |
Reference Summary:
quick-start.md - 5-minute setup guide, first component examples, troubleshooting, project structurecomponent-catalog.md - Complete list of 100+ components with install commands and use casesWhen using this skill, consider combining with:
nextjs - Next.js framework skilltailwind-v4-shadcn - Tailwind CSS v4 configurationreact-hook-form-zod - Form validationclerk-auth - Authenticationcloudflare-nextjs - Cloudflare deploymentThis skill documentation is provided under MIT License. Aceternity UI components have their own licensing - check https://ui.aceternity.com for details.
Last Updated: 2025-12-08 Version: 1.1.0 Maintainer: Claude Skills Maintainers