What is AtroUI? A Next.js component catalog on the shadcn registry
AtroUI is a dark-first React / Next.js component catalog. Add it with the shadcn CLI - source lands in your repo. Production sections, brand chrome, editable CONTENT.
AtroUI is a production React and Next.js component catalog. You add it with the shadcn CLI the same way you add any registry item. Components copy into your project so you own the source: dark-first sections, brand chrome, and optional host-bound tools that call your own APIs.
The canonical home is atroui.com. Docs, compare notes, and this blog all live under that brand so search results point somewhere real.
The job it is hired for
Most teams do not want to rebuild a hero, footer, and OG workspace from scratch for every product. They want a coherent dark UI that already looks like a shipped app, then they customize brand and content.
That is the job AtroUI is built for. You hire it to get from empty App Router project to a branded dark surface without assembling fifty primitives into a design system yourself.
Same ownership model as shadcn
Copy-paste kits optimize for owning every file in your repo. AtroUI uses that same model: npx shadcn add @atroui/… copies source in. The difference is altitude - production sections (heroes, who bands, CTAs, footers), brand chrome via getBrand(), and Host API tools that expect your own /api routes.
Edit CONTENT at the top of each installed file. Day one, you own the UI. See AtroUI vs copy-paste kits and AtroUI vs shadcn/ui.
Who it is for
Indie makers and small teams shipping Next.js products who want a dark-first system without spending a sprint on chrome.
Agencies and studios rebranding via DEFAULT_BRAND or NEXT_PUBLIC_SITE_*.
Builders who want SEO helpers and AI-adjacent workspaces that do not burn shared LLM keys on the docs host.
What you get in the box
Registry items for utils, brand, button, logo, site header, home bands, pricing, CTAs, and contact.
Editable CONTENT / DEFAULT_BRAND constants in every block file.
Host API tools (OG, thumbnails, scope) that you wire to your own backends.
Get started in one path
Init shadcn, add the @atroui registry, then add a component. Open the file and edit CONTENT.
Full steps: Installation. Catalog: Registry. Walkthrough: Install AtroUI in a Next.js App Router project.