OverviewHistoryStatsSecurity
npx skills add ...
Documentation
SKILL.md
npx skills add secondsky/claude-skills --skill aceternity-ui
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.
npx skills add secondsky/claude-skills --skill aceternity-ui
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:
Prerequisites:
@import "tailwindcss" and @theme; v3 also supported)For New Projects:
Initialize Aceternity UI via shadcn CLI:
Configure Registry:
After initialization, update components.json to add Aceternity registry:
Using shadcn CLI 3.0+ (Namespaced Registry):
Manual Installation:
If the registry method doesn't work, install manually:
lib/utils.ts:This setup runs multiple remote code executions (create-next-app, shadcn init, shadcn add). Before installing, follow supply chain security best practices:
npm config set ignore-scripts true (or Bun: disabled by default)socket package score npm <pkg> or use socket npm install <pkg> to check packagesLoad the dependency-upgrade skill for full security configuration including Socket CLI integration, cooldown setup, lockfile validation, and CI enforcement.
Create stunning animated backgrounds and visual effects for hero sections and full-page layouts.
Key Components:
Usage Example:
When to Use:
Interactive cards with hover effects, animations, and 3D transformations.
Key Components:
Usage Example:
When to Use:
Create engaging scroll-based animations and parallax effects.
Key Components:
Usage Example:
When to Use:
Animated text effects for headings, titles, and interactive typography.
Key Components:
Usage Example:
When to Use:
Enhanced button components with animations and effects.
Key Components:
Usage Example:
Modern navigation menus and tab systems.
Key Components:
Enhanced form inputs and file upload components.
Key Components:
Usage Example:
Modal dialogs and tooltips with animations.
Key Components:
Usage Example:
Image sliders and carousel components.
Key Components:
Grid layouts and container components.
Key Components:
Components for displaying data and comparisons.
Key Components:
Cursor-following effects and interactions.
Key Components:
3D visual effects using CSS transforms.
Key Components:
Loading animations and progress indicators.
Key Components:
Pre-built section templates.
Key Components:
All Aceternity components support dark mode via Tailwind's dark mode classes:
Components are responsive by default. Use Tailwind's responsive prefixes:
Components can be combined for complex layouts:
Use "use client" directive - Aceternity components use Framer Motion, requiring client-side rendering:
Lazy load heavy components:
Add ARIA labels:
Ensure keyboard navigation:
Override styles using className:
Modify component source directly - Since components are copied to your project, you can edit them:
Use TypeScript for prop types:
1. "Module not found: motion"
2. "cn is not defined"
Ensure lib/utils.ts exists with the cn helper function.
3. Components not animating Verify "use client" directive is at the top of the file.
4. Tailwind classes not working
Ensure Tailwind is set up. Under Tailwind v4 (CSS-first), globals.css should import Tailwind with a single directive:
(If you are still on Tailwind v3, the equivalent is the three @tailwind base; @tailwind components; @tailwind utilities; directives.)
5. Dark mode not working
Under Tailwind v4, configure dark mode in CSS using a custom variant (e.g. @custom-variant dark (&:where(.dark, .dark *)); for a class-based strategy). On Tailwind v3, set darkMode: "class" in tailwind.config.ts.
This skill provides significant token savings by:
Estimated savings: ~10k tokens (65-70% reduction) per implementation
Errors prevented:
Load reference files based on task context:
| 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) |
Reference Summary:
quick-start.md - 5-minute setup guide, first component examples, troubleshooting, project structurecomponent-catalog.md - Complete list of 100+ components with install commands and use casesWhen using this skill, consider combining with:
nextjs - Next.js framework skilltailwind-v4-shadcn - Tailwind CSS v4 configurationreact-hook-form-zod - Form validationclerk-auth - Authenticationcloudflare-nextjs - Cloudflare deploymentThis skill documentation is provided under MIT License. Aceternity UI components have their own licensing - check https://ui.aceternity.com for details.
Last Updated: 2025-12-08 Version: 1.1.0 Maintainer: Claude Skills Maintainers
# 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.tsxbun add motion clsx tailwind-merge
# or: npm install motion clsx tailwind-mergeimport { 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";