Getting started
Introduction
AtroUI is the React / Next.js component catalog at atroui.com. Dark-first design system: black canvas, electric blue brand, glass surfaces, and rounded CTAs. You install it like shadcn/ui - the CLI copies source into your project.
Quick start
bash
npx shadcn@latest init
npx shadcn@latest add @atroui/home-heroFull steps: Installation. Catalog: Registry.
How the catalog is organized
- Primitives - buttons, forms, motion, logo. Small reusable pieces.
- Blocks - heroes, footers, pricing, FAQ, forms. Production-shaped page sections. Prefer items tagged CLI in the sidebar.
- Tools - OG, thumbnails, planners. Often need your own host APIs.
- Headless - analytics and structured data with no visible UI.
Own the files
Add sections from the Registry. Edit CONTENT / DEFAULT_BRAND in the installed files, or set NEXT_PUBLIC_SITE_*. Logo, headers, footers, and mail defaults stay coherent through getBrand().
Host APIs & AI tools
Tools tagged Host API (OG workspace, thumbnails, scope chat, forms) expect you to wire /api/* and your own keys. This docs site does not burn shared LLM / image API tokens. Guide: Host APIs. Want sample OG output without setup? Try the live tool at makershot.tech/og.