/aceternity-ui

name: aceternity-ui
description: 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.
license: MIT
metadata:
  version: 1.1.0
  author: Claude Skills Maintainers
  last_updated: 2025-12-08
  last_verified: 2025-12-08
  motion_version: "12.23.25"
  clsx_version: "2.1.1"
  tailwind_merge_version: "3.4.0"
  references_included: 2
  keywords:
    - aceternity
    - aceternity-ui
    - react
    - nextjs
    - next.js
    - tailwind
    - tailwindcss
    - tailwind-css
    - framer-motion
    - motion
    - animations
    - animated-components
    - ui-components
    - component-library
    - shadcn
    - shadcn-ui
    - 3d-effects
    - background-effects
    - hero-sections
    - landing-pages
    - parallax
    - card-components
    - animated-cards
    - interactive-ui
    - modern-ui
    - visual-effects
    - typescript
    - bun
    - npm
    - pnpm

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 v4+ styling (CSS-first config; v3 also works with JS config)
• 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 v4+ (CSS-first `@import "tailwindcss"` and `@theme`; v3 also supported)
• TypeScript (recommended)
• Node.js 20+ 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](https://ui.aceternity.com) to your project

Secure Installation

This setup runs multiple remote code executions (`create-next-app`, `shadcn init`, `shadcn add`). Before installing, follow supply chain security best practices:

• **Block post-install scripts** — `npm config set ignore-scripts true` (or Bun: disabled by default)
• **Cooldown period** — Wait 7 days for new package versions to be vetted by the community
• **Audit before installing** — Run `socket package score npm <pkg>` or use `socket npm install <pkg>` to check packages

Load the `dependency-upgrade` skill for full security configuration including Socket CLI integration, cooldown setup, lockfile validation, and CI enforcement.

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 wi