Install AtroUI in a Next.js App Router project (step-by-step)

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 init

2. Add the AtroUI registry

Point the CLI at the AtroUI registry on atroui.com.

npx shadcn@latest registry add @atroui=https://www.atroui.com/r/{name}.json

{
  "registries": {
    "@atroui": "https://www.atroui.com/r/{name}.json"
  }
}

3. Add a component

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/button

4. 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.

Full catalog: Registry. Theming tokens: Theming.