Aceternity UI Skill

Overview

Aceternity 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:

• 100+ animated, production-ready components
• Built for Next.js 13+ with App Router support
• Full TypeScript support
• Tailwind CSS v3+ styling
• Framer Motion animations
• Dark mode support
• Copy-paste friendly (not an npm package)
• Full source code access for customization

Prerequisites:

• Next.js 13+ (App Router recommended)
• React 16.8+
• Tailwind CSS v3+
• TypeScript (recommended)
• Node.js 18+ with bun, npm, or pnpm

Installation

Initial Setup

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"
  }
}

Installing Components

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:

1. Install required dependencies:

bun add motion clsx tailwind-merge
# or: npm install motion clsx tailwind-merge

2. Add utility function to lib/utils.ts:

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

3. Copy component code from ui.aceternity.com to your project

Component Categories

1. Backgrounds & Effects (28 components)

Create stunning animated backgrounds and visual effects for hero sections and full-page layouts.

Key Components:

• Background Beams - Animated glowing beams following SVG paths
• Background Gradient - Smooth gradient backgrounds with transitions
• Wavy Background - Animated wave patterns
• Aurora Background - Northern lights inspired animated gradients
• Sparkles - Particle sparkle effects
• Meteors - Falling meteor animations
• Spotlight - Dynamic spotlight effects
• Grid and Dot Backgrounds - Subtle grid/dot patterns
• Vortex - Swirling vortex animations
• Canvas Reveal Effect - Revealing content with canvas animations

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:

• Hero sections requiring visual impact
• Landing pages with animated backgrounds
• Full-screen sections needing depth
• Portfolio or agency websites
• Marketing pages with call-to-actions

2. Card Components (15 components)

Interactive cards with hover effects, animations, and 3D transformations.

Key Components:

• 3D Card Effect - Cards with CSS perspective and 3D transforms
• Card Hover Effect - Smooth hover animations and transitions
• Expandable Card - Cards that expand to show more content
• Focus Cards - Cards that focus/highlight on hover
• Card Spotlight - Spotlight effect following mouse
• Glare Card - Holographic glare effect
• Wobble Card - Playful wobble animations
• Infinite Moving Cards - Auto-scrolling card carousel
• Direction Aware Hover - Hover effects based on cursor direction

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:

• Product showcases
• Featur