aceternity-ui

secondsky/claude-skillsArchitecture & DesignAudit passedSnapshot 4acfd1ba7a6e

Installs: 0

Summary

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.

SKILL.md

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)

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

# 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

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

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

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

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

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

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} />;
}

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} />;
}

import { MovingBorder } from "@/components/ui/moving-border";

export function CTAButton() {
  return (
    <MovingBorder duration={2000} className="p-4">
      <span>Get Started</span>
    </MovingBorder>
  );
}

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");
      }}
    />
  );
}

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>
  );
}

<div className="bg-white dark:bg-black text-black dark:text-white">
  {/* Content */}
</div>

<h1 className="text-2xl md:text-4xl lg:text-6xl">
  Responsive Heading
</h1>

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 client";
import { Component } from "@/components/ui/component";

import dynamic from 'next/dynamic';

const HeavyBackground = dynamic(
  () => import('@/components/ui/background-beams'),
  { ssr: false }
);

<button aria-label="Open menu">
  <MenuIcon />
</button>

<div role="button" tabIndex={0} onKeyDown={handleKeyDown}>
  Interactive element
</div>

<BackgroundBeams className="opacity-50" />

// components/ui/background-beams.tsx
export function BackgroundBeams({ className, myCustomProp }: Props) {
  // Customize as needed
}

interface CardProps {
  title: string;
  description: string;
  image?: string;
}

export function Card({ title, description, image }: CardProps) {
  // Component implementation
}

bun add motion
# or: npm install motion

@import "tailwindcss";

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)

aceternity-ui

Summary

Aceternity UI Skill

Overview

Installation

Initial Setup

Installing Components

Secure Installation

Component Categories

1. Backgrounds & Effects (28 components)

2. Card Components (15 components)

3. Scroll & Parallax (5 components)

4. Text Components (10 components)

5. Buttons (4 components)

6. Navigation (5 components)

7. Input & Forms (3 components)

8. Overlays & Popovers (3 components)

9. Carousels & Sliders (4 components)

10. Layout & Grid (3 components)

11. Data & Visualization (2 components)

12. Cursor & Pointer (3 components)

13. 3D Components (2 components)

14. Loaders (2 components)

15. Sections & Blocks (3 components)

Common Patterns

Dark Mode Support

Responsive Design

Combining Components

Best Practices

1. Performance Optimization

2. Accessibility

3. Customization

4. Type Safety

Troubleshooting

Common Issues

Token Efficiency

When to Load References

Additional Resources

Related Skills

License

Related skills