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-08T00:00:00.000Z","last_verified":"2025-12-08T00:00:00.000Z","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: Install required dependencies: bun add motion clsx tailwind-merge # or: npm install motion clsx tailwind-merge 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)) } 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 Colourful Text - Gradient animated text Usage Example: 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} /> ; } When to Use: Hero headings Attention-grabbing titles Dynamic content displays Interactive landing pages Animated CTAs 5. Buttons (4 components) Enhanced button components with animations and effects. Key Components: Tailwind CSS Buttons - Collection of styled buttons Hover Border Gradient - Animated gradient borders Moving Border - Animated border movement Stateful Button - Multi-state button with transitions Usage Example: import { MovingBorder } from "@/components/ui/moving-border" ; export function CTAButton ( ) { return ( < MovingBorder duration = {2000} className = "p-4" > < span > Get Started </ span > </ MovingBorder > ); } 6. Navigation (5 components) Modern navigation menus and tab systems. Key Components: Floating Navbar - Floating navigation bar Navbar Menu - Full-featured navigation menu Tabs - Animated tab components Resizable Navbar - Responsive navigation Sticky Banner - Sticky announcement banners 7. Input & Forms (3 components) Enhanced form inputs and file upload components. Key Components: Signup Form - Animated signup forms Placeholders and Vanish Input - Inputs with animated placeholders File Upload - Drag-and-drop file upload Usage Example: 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"); }} /> ); } 8. Overlays & Popovers (3 components) Modal dialogs and tooltips with animations. Key Components: Animated Modal - Modal with smooth animations Animated Tooltip - Tooltips with enter/exit animations Link Preview - Link preview popover on hover Usage Example: 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 > ); } 9. Carousels & Sliders (4 components) Image sliders and carousel components. Key Components: Images Slider - Full-screen image slider Carousel - Standard carousel component Apple Cards Carousel - Apple-style card carousel Animated Testimonials - Testimonial slider 10. Layout & Grid (3 components) Grid layouts and container components. Key Components: Layout Grid - Animated grid layouts Bento Grid - Bento-box style grid Container Cover - Full-screen container 11. Data & Visualization (2 components) Components for displaying data and comparisons. Key Components: Timeline - Animated timeline component Compare - Before/after comparison slider 12. Cursor & Pointer (3 components) Cursor-following effects and interactions. Key Components: Following Pointer - Elements following cursor Pointer Highlight - Highlight effect on cursor Lens - Magnifying lens effect 13. 3D Components (2 components) 3D visual effects using CSS transforms. Key Components: