AtroUIAtroUI

Blog

Essays for people who install.

Host APIs, registry ownership, tokens, and the boring paths that make Next.js sections ship. One idea per post — then go edit the file.

Latest essay

Add the section. Then edit the file.

AtroUI is MIT. You install with the shadcn CLI, the source lands in your repo, and Host APIs use your keys. We pick defaults so the first hour is usable. After that, change whatever you want.

Read essay

Index

16 earlier essays

  1. Why we shipped Adaptive Theme SwitchNaive dark mode crushes designed light palettes. Adaptive Theme Switch builds an OKLCH night companion from your light tokens so muted copy still reads. Own the files. Not a theme engine.
  2. From scope to social cardAtroUI launch workflow: one ProjectBrief carries Scope Chat and Project Planner into the OG workspace. Own the UI. Preview without keys. Bring your own Host API keys for AI.
  3. AtroUI is now in the official shadcn registry directory@atroui merged into the official shadcn/ui registry directory. What changed, what did not, and how to install without a manual registry URL.
  4. Don’t show the hero until the sphere is readyHow atroui.com loads a heavy WebGL hero: opaque gate, real progress, shader warm-up underneath, one fade into the finished room. Why piecemeal UI while Three.js boots feels broken.
  5. Indie site kit: new AtroUI components for portfolio sitesWhat shipped in the AtroUI indie site kit (later removed): narrow chrome, command menu, changelog, countdown, personal hero, and more — plus Home Crafts, Feature Grid, and Logo Cloud.
  6. Host APIs: own the UI, borrow the boring security, bring your own keysHow AtroUI Host APIs work: thin Next.js routes, hardened handlers in atroui/api/*, BYOK for forms and AI tools, install modes, rate limits, and what you still own in production.
  7. Why AtroUI moved from npm install to the shadcn registry (and what stayed on npm)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.
  8. What is AtroUI? A Next.js component catalog on the shadcn registryAtroUI 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.
  9. Install AtroUI in a Next.js App Router project (step-by-step)Add AtroUI with the shadcn CLI: init, then add @atroui/home-hero. Listed in the official directory. Components land in your repo with editable CONTENT.
  10. Dark-first design tokens in AtroUIHow AtroUI’s dark-first tokens work: charcoal canvas, violet brand #6d28d9, Merriweather + DM Sans, and how to override them in atroui/globals.css.
  11. Rebrand AtroUI chrome with getBrand() and NEXT_PUBLIC_SITE_*Override AtroUI logo text, SEO defaults, and mail chrome with getBrand() or NEXT_PUBLIC_SITE_*. Keep demo content under content/ separate.
  12. AtroUI vs shadcn/ui: production sections on the same ownership modelBoth use the shadcn CLI. AtroUI ships production sections and brand chrome; shadcn/ui-style kits optimize for blank-slate primitives.
  13. transpilePackages and Turbopack: UI library install gotchasWhy Next.js needs transpilePackages for TypeScript UI libraries like AtroUI, common Turbopack errors, and how to fix a fresh App Router install.
  14. ThemeProvider and dark mode with AtroUI and next-themesWire dark mode for AtroUI registry components: class strategy, default dark, and tokens so dark-first styles actually apply.
  15. Why dark-first design systems age better for product UIsLight-first dark mode is a retrofit. Dark-first tokens, surfaces, and type (like AtroUI) stay coherent as product UIs grow.
  16. Lessons from shipping AtroUI (registry + package internals)Practical lessons from shipping AtroUI: shadcn registry for consumers, peers, CSS entrypoints, and keeping demo content off the public path.