Aceternity UI

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

1. 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))
}

1. Copy component code from 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 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
• Feature highlights
• Portfolio items
• Team member profiles
• Pricing tiers
• Blog post previews

3. Scroll & Parallax (5 components)

Create engaging scroll-based animations and parallax effects.

Key Components:

• Parallax Scroll - Images with parallax scrolling
• Sticky Scroll Reveal - Content reveals while scrolling
• Container Scroll Animation - Animated scroll containers
• Hero Parallax - Parallax hero sections
• MacBook Scroll - MacBook-style scroll interactions

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:

• Feature showcases with scroll interactions
• Storytelling layouts
• Product tours
• Long-form content with visual breaks
• Interactive timelines

4. Text Components (10 components)

Animated text effects for headings, titles, and interactive typography.

Key Components:

• Text Generate Effect - Text appearing character by character
• Typewriter Effect - Typing animation
• Flip Words - Word rotation animations
• Text Hover Effect - Interactive text on hover
• Hero Highlight - Gradient text highlights
• Encrypted Text - Matrix-style encrypted text effect