Getting started

Getting Started

AtroUI is a dark-first React / Next.js catalog on the official shadcn registry. This guide covers the essential commands, your first block, and where to go next.

Quick Start

1. Init shadcn

You need a Next.js app with Tailwind CSS v4. On a fresh app:

bash

npx shadcn@latest init

Prerequisites and troubleshooting: Installation.

2. Add your first block

@atroui is in the official shadcn directory — no manual registry URL. Add the homepage hero:

bash

npx shadcn@latest add @atroui/home-hero

Source lands under your aliases (for example components/blocks/home-hero.tsx). Edit the CONTENT object at the top of the file. Browse the rest of the catalog: Components.

3. Learn the essential commands

Action	How
Customize copy	`Edit CONTENT at top of file`
Try OG cards	Open /og
Theme tokens	Theming
Forms / AI routes	Host APIs (`npm i atroui`)

If you forget a registry name, search Components or the Registry guide.

Coming from…?

Dedicated paths if you already have a stack:

Plain shadcn/ui — add @atroui/… beside your existing components
npm atroui package — Host API consumers and transpile setup
Copy-paste / animation kits — what to do differently; positioning in Compare

Getting started

Getting Started

AtroUI is a dark-first React / Next.js catalog on the official shadcn registry. This guide covers the essential commands, your first block, and where to go next.

Quick Start

1. Init shadcn

You need a Next.js app with Tailwind CSS v4. On a fresh app:

bash

npx shadcn@latest init

Prerequisites and troubleshooting: Installation.

2. Add your first block

@atroui is in the official shadcn directory — no manual registry URL. Add the homepage hero:

bash

npx shadcn@latest add @atroui/home-hero

Source lands under your aliases (for example components/blocks/home-hero.tsx). Edit the CONTENT object at the top of the file. Browse the rest of the catalog: Components.

3. Learn the essential commands

Action	How
Customize copy	`Edit CONTENT at top of file`
Try OG cards	Open /og
Theme tokens	Theming
Forms / AI routes	Host APIs (`npm i atroui`)

If you forget a registry name, search Components or the Registry guide.

Coming from…?

Dedicated paths if you already have a stack:

Plain shadcn/ui — add @atroui/… beside your existing components
npm atroui package — Host API consumers and transpile setup
Copy-paste / animation kits — what to do differently; positioning in Compare