AtroUI
Dark-first React / Next.js catalog on the official shadcn registry. MIT. You own the copied files.
npx shadcn@latest add @atroui/home-hero
Public namespace @atroui — listed in shadcn registries.json. No GitHub token. Not a private GitHub registry. Best with Tailwind CSS v4.
Optional Host APIs (npm i atroui + transpilePackages): contact, waitlist, newsletter, OG, thumbnail, scope. BYOK (SMTP/Resend, Hugging Face/Gemini/xAI). AtroUI never holds your keys and does not run paid AI on atroui.com. Missing keys → 503 on your app.
Docs: atroui.com · Installation · Host APIs · Compare · Registry
Features
- Registry (own the files) -
npx shadcn add @atroui/… copies source into your repo
- Dark-first sections - heroes, chrome, CTAs with editable
CONTENT
- Primitives - Button, logo, theme toggle
- Tools - OG workspace, thumbnail, scope (Host APIs, BYOK)
- Headless - analytics, JSON-LD, reviews helpers
Install
npx shadcn@latest init
npx shadcn@latest add @atroui/home-hero
Open the installed file and edit CONTENT / DEFAULT_BRAND at the top - that is the point. Tailwind v4 config (@source, monorepo scanning) stays in your project.
Install modes
Never lead with npm i atroui for pure UI. Use the CLI first; add the package only when /api handlers appear.
| Mode | What you get | Install |
|---|
| Registry UI only | Heroes, chrome, form UI — owned source files | npx shadcn add @atroui/…. No atroui package. |
| Forms | Waitlist / newsletter UI + hardened routes (optional api-contact for your own contact UI) | npm i atroui, transpilePackages: ["atroui"], then @atroui/waitlist-form + @atroui/api-waitlist (same for newsletter; contact → @atroui/api-contact). |
| AI tools | OG, thumbnail, scope chat + matching APIs | Same package setup + @atroui/og-workspace / thumbnail-workspace / scope-chat + @atroui/api-*. |
Monorepo structure
/
├── apps/
│ └── docs/ # Landing + docs + registry (@atroui/docs)
├── packages/
│ ├── ui/ # Publishable `atroui` (Host APIs + docs host)
│ └── typescript-config/
├── package.json
├── pnpm-workspace.yaml
└── turbo.json
Development
Requires pnpm and Node 20+ (engines: >=20).
pnpm install
pnpm dev # Docs → http://localhost:3000
| Command | Description |
|---|
pnpm dev | Docs site on :3000 |
pnpm build | Build workspace |
pnpm typecheck | Typecheck all packages |
pnpm test | Vitest |
pnpm lint | ESLint |
pnpm changeset | Add a version bump note for atroui |
Copy .env.example to apps/docs/.env.local when you need email, analytics, or image-gen APIs.
Docs & catalog
Some catalog modules call host /api/* routes (OG, thumbnail, scope, contact). They need your own keys in production — see Host APIs (Host API in the sidebar).
Brand chrome vs demo content
Chrome (logo, headers, SEO, mail) resolves through getBrand() - AtroUI by default. Override with NEXT_PUBLIC_SITE_*. Sample studio data under atroui/content/* is optional portfolio copy; replace when shipping your own product.
Contributing
See CONTRIBUTING.md for setup, PR flow, changesets, and commit conventions.
See CODE_OF_CONDUCT.md for community standards.
Security
See SECURITY.md to report vulnerabilities.
License
MIT © AtroUI contributors
