Install AtroUI in a Next.js App Router project (step-by-step)
Add AtroUI with the shadcn CLI: init, then add @atroui/home-hero. Listed in the official directory. Components land in your repo with editable CONTENT.
This guide gets AtroUI into a Next.js App Router app the shadcn way. Target: Next.js 15+, React 18/19, Tailwind CSS v4.
When you finish, you should have a hero (or button) file in your project that you can edit. Deeper detail always lives on the Installation docs.
1. Init shadcn
You need a components.json in the app. If you already have one, skip this step.
npx shadcn@latest init2. Add a component
@atroui is in the official shadcn registry directory. No manual registry add URL step. The CLI resolves the namespace for you.
Dependencies resolve as @atroui/brand, @atroui/utils, and so on - not bare names on the default shadcn registry.
npx shadcn@latest add @atroui/home-hero
npx shadcn@latest add @atroui/site-header
npx shadcn@latest add @atroui/button3. Edit CONTENT
Open the installed file (for example components/blocks/home-hero.tsx). Change the CONTENT constants at the top - stamp, headline, CTAs. That is the point of the registry.