Chapter 1: Setup & Utilities

Core Idea

Everything needed before installing your first real component: the Tailwind/Next.js prerequisites and the shared cn class-merge helper most components import.

Reference Table

Name	Purpose	Install
Add Utilities	Installs the shared cn helper (clsx + tailwind-merge) most components import	npx shadcn@latest add @aceternity/add-utilities
CLI	Docs page for installing Aceternity UI components via the shadcn CLI	npx shadcn@latest add @aceternity/cli
Install Next.js	Guide to scaffolding a project with Create Next App	npx shadcn@latest add @aceternity/install-nextjs
Install Tailwind CSS	Guide to adding Tailwind CSS v3 or v4 to a Next.js project	npx shadcn@latest add @aceternity/install-tailwindcss
Tailwind CSS buttons	A curated set of plain Tailwind button styles (no Motion/JS behavior)	npx shadcn@latest add @aceternity/tailwindcss-buttons

Key Takeaways

1. Install order: Tailwind → add-utilities (cn helper) → motion peer dependency → the component itself.
2. cn is a dependency of most other components in this catalogue — install it early, not on demand.
3. "Tailwind CSS buttons" is a plain-CSS snippet pack, not an animated component — reach for ch005 (Buttons & Inputs) for the Motion-driven buttons.

Connects To

• ch005 (Buttons & Inputs): the animated button components that build on this setup.
• Core Patterns in SKILL.md: full stack requirements and the shadcn/ui comparison.