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