Getting started
Coming from…
What to do if you already have a stack. For positioning vs other kits, see Compare.
From plain shadcn/ui
Keep your existing components. Add AtroUI blocks beside them — same CLI, same ownership model.
- Confirm Tailwind v4 and a working
components.json. - Run
npx shadcn@latest add @atroui/home-hero(or any@atroui/…name from the catalog). - Edit
CONTENTat the top of the copied file. Align tokens with Theming if brand colors diverge.
bash
npx shadcn@latest add @atroui/button
npx shadcn@latest add @atroui/home-heroFrom the npm atroui package
You already depend on atroui for Host API handlers or shared tokens. Prefer the registry for UI: copy source into the app, keep the package for atroui/api/*.
- Keep
transpilePackages: ["atroui"]in Next config. - Add UI with the CLI (
@atroui/waitlist-form, etc.) instead of importing large blocks from the package when a registry item exists. - Add matching
@atroui/api-*routes; leave keys in your env. Details: Host APIs.
Background on the split: npm → shadcn registry.
From copy-paste / animation kits
If you are used to Magic UI / Aceternity-style packs: AtroUI optimizes for production sections and site chrome on a dark-first token sheet — not for a pile of one-off demos. Positioning: Compare.
- Start from Getting Started and install one block end-to-end (
@atroui/home-hero). - Prefer job hubs over random browsing: Collections (forms, OG, launch).
- For social cards, try the live room at /og before installing
@atroui/og-workspace.