Essay
AtroUI is now in the official shadcn registry directory. Here is why that matters for SaaS builders.
The shadcn registry directory merged @atroui. That means the production sections we use on SaaS MVPs can be installed without a custom registry URL. Lower friction, same ownership.
Most SaaS MVPs we ship at Makershot need the same landing bones: a hero, site chrome, a contact or waitlist form, and some social proof. We used to build these from scratch every sprint, or fight with locked npm themes that hid the implementation. A few weeks ago we open-sourced AtroUI to solve that: copy-paste React sections you own, installed with the shadcn CLI. AtroUI also includes optional Host APIs: thin, hardened Next.js route stubs and handlers you can install alongside the UI to wire forms, waitlists, OG generation, or AI tools while keeping provider keys in your environment.
Today that path got simpler. shadcn-ui/ui#11420 was merged, and @atroui is now listed in the official shadcn registry directory. No more manual registry add URL. New users can run npx shadcn add @atroui/home-hero directly after shadcn init. The registry is the same. The source still lands in their repo. The friction is lower.
This post is the studio note on why that matters, what changed, and how SaaS builders should use it.
What the directory does
The shadcn registry directory is an open index of community registries. When a registry is listed there, the CLI can resolve the namespace without the user configuring a URL in components.json. It is the difference between:
# Before directory listing
npx shadcn@latest init
npx shadcn@latest registry add @atroui=https://www.atroui.com/r/{name}.json
npx shadcn@latest add @atroui/home-hero# After directory listing
npx shadcn@latest init
npx shadcn@latest add @atroui/home-heroFor a single install the difference is one line. For a team onboarding a designer or a founder, that line is one less place to mistype a URL or argue about components.json syntax. It also makes AtroUI discoverable inside the shadcn ecosystem: shadcn search and the directory UI can surface it alongside the official registry.
The registry URL is still https://www.atroui.com/r/{name}.json. The directory is just a pointer. We keep serving the catalog, so nothing changes about how the files are authored or hosted.
Why this matters for SaaS MVPs
MVPs live or die by speed of execution. Not the speed of writing code, but the speed of getting a coherent product surface in front of users. Every hour spent wiring a landing page, restyling a CTA, or fighting a theme package is an hour not spent on the core workflow.
AtroUI is built for that exact bottleneck. The blocks are opinionated: black canvas, electric blue brand, glass surfaces, soft-rect CTAs. They look like a finished product out of the box because they were extracted from finished products. But they are not locked. You edit CONTENT at the top of each file. You change DEFAULT_BRAND or set NEXT_PUBLIC_SITE_* env vars. You own the files, so you can delete what you do not need and fork what you do.
The directory listing makes that starting point one command away. For a founder on a 7-day MVP sprint, that matters.
The install modes are still the same
Directory listing does not change the product model. There are still three ways to use AtroUI, and the CLI-first path is still the default:
# 1) UI only - no npm package
npx shadcn@latest add @atroui/home-hero
npx shadcn@latest add @atroui/site-header @atroui/faq
# 2) Forms - package + thin route stubs
npm i atroui
# next.config.ts → transpilePackages: ["atroui"]
npx shadcn@latest add @atroui/contact-form @atroui/api-contact
# 3) AI tools - same package setup
npx shadcn@latest add @atroui/og-workspace @atroui/api-generateThe key boundary is still the same: copy UI from the registry, keep hardened handlers in the atroui npm package, and bring your own keys for mail and AI providers. The directory listing only makes the first step shorter.
What we did not change
We did not make AtroUI a shadcn clone. The directory entry is a door, not a rebrand. We still ship production sections, Host APIs, and an identity kit that stays on-brand through env vars.
We did not add telemetry, premium upsells, or a managed backend. The rules are still locked: AtroUI never ships API keys, does not run paid AI on atroui.com, and UI consumers own their files.
We did not deprecate the AtroUI CLI. For teams that prefer not to use the shadcn toolchain, npx @atroui/cli add home-hero still works and pulls the same registry JSON. Both paths are first-class.
How we use it on sprints
On a typical 7-day MVP sprint, we now start the landing surface like this:
npx shadcn@latest add @atroui/home-hero
npx shadcn@latest add @atroui/site-header @atroui/site-footer
npx shadcn@latest add @atroui/pricing-overviewThen we edit CONTENT in the hero, swap the default brand for the founder's brand via env vars, and wire up the waitlist or contact form with a Host API stub. The landing page is coherent in hours, not days. That is the point.
For client projects, the owned-source model also means the handoff is clean. There is no private AtroUI package the client cannot touch. Everything is in their repo, in their git history, with their copy.
Try it
If you are starting a new Next.js project, run:
npx shadcn@latest init
npx shadcn@latest add @atroui/home-heroOpen the file it writes, edit CONTENT and DEFAULT_BRAND, and you have a production landing section in your repo. For the full install guide: AtroUI Installation. For the behind-the-scenes on Host APIs: AtroUI Host APIs. For the AtroUI announcement: Introducing AtroUI.
If you want the whole MVP built instead of just the UI layer, Makershot runs 7-day sprints for MVPs, AI integrations, and design systems. AtroUI is the open catalog; Makershot is the studio when you need the full product shipped.
Related
- 01
AtroUI SEO Master Plan — what we shipped
Summary of the Identity Kit, JSON-LD, sitemap optimization, IndexNow integration, and OG watermarking implemented for AtroUI.
Essay · 3 min read - 02
AtroUI Host APIs: own the UI, bring your keys
After launch, AtroUI productized Host APIs: copy-paste UI, thin Next.js routes, hardened handlers, and BYOK. Forms and AI tools without surrendering secrets to the docs host.
Essay · 9 min read
Want this built for you?
Fixed-scope MVP sprints and AI integrations. Same stack as this guide.
