Blog
Guides that take you from search to install: App Router setup, tokens, branding, and how AtroUI compares to other kits. Then open the registry and add components with the shadcn CLI.
Latest
A detailed look at migrating AtroUI from a classic npm UI package to a shadcn-compatible registry: ownership, updates, Host APIs, and how to migrate an existing app.
Read post →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.
Add AtroUI with the shadcn CLI: init, register @atroui, add home-hero. Components land in your repo with editable CONTENT.
How AtroUI’s dark-first tokens work: black canvas, brand blue #0b7bff, glass surfaces, Outfit, and how to override them in atroui/globals.css.
Override AtroUI logo text, SEO defaults, and mail chrome with getBrand() or NEXT_PUBLIC_SITE_*. Keep demo content under content/ separate.
Both use the shadcn CLI. AtroUI ships production sections and brand chrome; shadcn/ui-style kits optimize for blank-slate primitives.
Why Next.js needs transpilePackages for TypeScript UI libraries like AtroUI, common Turbopack errors, and how to fix a fresh App Router install.
Wire dark mode for AtroUI registry components: class strategy, default dark, and tokens so dark-first styles actually apply.
Light-first dark mode is a retrofit. Dark-first tokens, surfaces, and type (like AtroUI) stay coherent as product UIs grow.
Practical lessons from shipping AtroUI: shadcn registry for consumers, peers, CSS entrypoints, and keeping demo content off the public path.
Prefer the catalog? Read the docs or own the UI.