AtroUI

Production React / Next.js component catalog and dark-first design system.

Docs: · Registry:

Black canvas · electric blue (#0b7bff / #92dbe0) · glass surfaces · pill CTAs. Primitives, page sections, and host-bound tools extracted from real products - delivered via the shadcn CLI.

Features

  • Registry (own the files) - npx shadcn add @atroui/home-hero 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)
  • Headless - analytics, JSON-LD, reviews helpers

Install

bash
npx shadcn@latest initnpx shadcn@latest add @atroui/home-hero

Full guide: · Catalog: · Host APIs:

Open the installed file and edit CONTENT / DEFAULT_BRAND at the top - that is the point.

Install modes

Never lead with npm i atroui for pure UI. Use the CLI first; add the package only when /api handlers appear.

ModeWhat you getInstall
Registry UI onlyHeroes, chrome, form UI — owned source filesnpx shadcn add @atroui/…. No atroui package.
FormsContact / waitlist / newsletter UI + hardened routesnpm i atroui, transpilePackages: ["atroui"], then @atroui/contact-form + @atroui/api-contact (same for waitlist / newsletter).
AI toolsOG, thumbnail, scope chat + matching APIsSame 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 and Node 20+ (engines: >=20).

bash
pnpm installpnpm dev          # Docs → http://localhost:3000
CommandDescription
pnpm devDocs site on :3000
pnpm buildBuild workspace
pnpm typecheckTypecheck all packages
pnpm testVitest
pnpm lintESLint
pnpm changesetAdd a version bump note for atroui

Copy .env.example [blocked] to apps/docs/.env.local when you need email, analytics, or image-gen APIs.

Docs & catalog

LinkWhat
Landing
Introduction
CLI + install modes
Forms / AI routes, BYOK
Catalog
Logo & voice
Articles
Release notes

Some catalog modules call host /api/* routes (OG, thumbnail, scope, contact). They need your own keys in production — see (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 for setup, PR flow, changesets, and commit conventions. See for community standards.

Security

See to report vulnerabilities.

License

© AtroUI contributors