Aceternity UI

How to Use This Skill

Without arguments — load Core Patterns below for install/stack conventions and the shadcn/ui comparison
Looking for an effect — ask about a use case ("hero background", "card hover effect", "loading state"); I find the matching category chapter
Know the name — ask for a component by name (e.g. "Aurora Background"); I find its chapter and install slug
Browse — ask "what categories do you have?" to see the full index, or check cheatsheet.md for the full flat list of all free components in one table

Core Patterns & Conventions

Everything installs the same way. npx shadcn@latest add @aceternity/<slug> (the shadcn CLI, not a separate Aceternity CLI) copies the component's TypeScript source directly into the project — there's no @aceternity/* npm runtime package and no version to upgrade. You own the code after install and can edit any line.

Stack requirement: React 18+, Next.js 14+, Tailwind CSS v3 or v4, TypeScript, and motion (formerly Framer Motion) as a peer dependency (npm install motion). A few 3D components (3D Globe, GitHub Globe) additionally need three and @react-three/fiber.

Setup order before installing any component: (1) Tailwind CSS configured in the project, (2) the shared cn utility installed (npx shadcn@latest add @aceternity/add-utilities — merges Tailwind classes via clsx + tailwind-merge), (3) then install individual components.

Aceternity UI vs shadcn/ui — complementary, not competing. shadcn/ui covers application primitives (dialogs, forms, tables — data-dense UI). Aceternity UI covers animated marketing/landing-page sections (hero sections, bento grids, background effects, scroll-driven reveals). Both are copy-paste-source, both use Tailwind, both install through the same shadcn CLI. A typical Next.js marketing site uses shadcn/ui for app chrome and Aceternity UI for the landing page. See also shadcn-ui-docs and radix-primitives-docs/base-ui-docs (the primitives shadcn/ui is built on) in this library.

Licence: free components are free to use in unlimited personal and commercial projects. Reselling or redistributing the components (free or premium) as a competing component library or template is not permitted. Full terms: https://ui.aceternity.com/licence. Premium blocks/templates/packs require an Annual ($169/yr) or Lifetime ($199 one-time) All-Access purchase; there are no refunds since purchase grants immediate source access.

This is a discovery index, not a props/API reference. Each entry below gives the component's purpose and install command. For exact props, live preview, and full source, open the linked page on ui.aceternity.com — that page is the actual documentation; this skill exists so an agent can quickly pick the right component and the right install command without browsing the site.

Chapter Index

Free components (by category)

#	Category	Components
ch001	Setup & Utilities	cn utility, CLI, Next.js/Tailwind install guides, Tailwind button snippets
ch002	Backgrounds & Ambient Effects	Aurora, beams, shaders, noise, grid/dot patterns, world map
ch003	Hero & Scroll Sections	Hero variants, parallax, macbook scroll, spotlight, sticky reveal
ch004	Cards & Grids	3D cards, bento grid, hover/tilt effects, compare, lens
ch005	Buttons & Inputs	Gradient/moving borders, stateful button, file upload, forms
ch006	Navigation	Navbars, floating dock, sidebar, notch
ch007	Text & Content Effects	Text reveal/flip/generate effects, code block, terminal, link preview
ch008	Carousels & Testimonials	Carousels, infinite moving cards, testimonials, feature sections
ch009	Loaders, Modals & Tabs	Loaders, modal, tabs, tooltip, globe

Paid tier (All-Access)

#	Title	Covers
ch010	Premium Blocks (167)	Full-page sections by category — backgrounds, bento grids, blog, cards, CTA, FAQs, feature, footers, hero, login/signup, navbars, pricing, shaders, sidebars, stats, team, testimonials, text animations
ch011	Templates & Component Packs	17 full-page templates, 23 themed component packs

Topic Index

3D effects → ch004 (cards, pin, globe), ch002 (globe backgrounds)
Backgrounds (all) → ch002
Buttons → ch005
Card hover/tilt effects → ch004
Forms & file upload → ch005
Hero sections → ch003
Install / setup → ch001, Core Patterns above
Loaders / loading state → ch009
Modals & overlays → ch009
Navbars / sidebar / dock → ch006
Parallax / scroll effects → ch003
Shaders (cloud, dither) → ch002
Sparkles / particle effects → ch002
Testimonials → ch008
Text animation (flip, reveal, typewriter) → ch007
Tooltips → ch009

Supporting Files

glossary.md — recurring UI/animation terms used in component descriptions
cheatsheet.md — flat table of all ~108 free components (name + install slug), for fast grep without opening a chapter

Scope & Limits

This skill indexes the free component catalogue in depth (ch001-ch009) and summarizes the paid All-Access tier (167 premium blocks, 17 templates, 23 packs) at category level only (ch010-ch011) — it does not enumerate every paid item, since the source itself only lists them, not their source code, and the user needs an active purchase to access them. No component source code is included anywhere in this skill (the source file doesn't contain it either) — only name, one-line purpose, category, and install command. For props/anatomy/live preview, follow the linked ui.aceternity.com/components/<slug> URL.