Skip to main content

Essay

Introducing AtroUI

We extracted the UI we actually ship on client sprints into a free React / shadcn registry. Own the source, edit CONTENT, keep the dark-first system.

KoustavAugust 6, 20268 min readDesign

Every sprint we take at Makershot starts with the same quiet argument. The founder needs a coherent interface this week. They also refuse to rent a black-box theme they cannot brand, fork, or delete six months later.

Locked npm themes hide the implementation. Screenshot kits look finished until you need to change one string. Building a full design system from zero is honest craft, and it burns the week you meant to validate the product.

We did not set out to publish another component library. We were trying to stop redesigning the same heroes, chrome, and CTAs on every engagement, and to stop choosing between speed and ownership.

So we made the reusable part public.

Today we are shipping AtroUI: a free, MIT React and Next.js catalog installed with the shadcn CLI. The source lands in your repo. You edit `CONTENT` at the top of each file. The dark-first system stays coherent because the tokens and primitives are shared, not because a package owns your homepage.

Own the source is the product

Most UI kits treat the rendered demo as the product. AtroUI treats the file in your git history as the product.

`npx shadcn add @atroui/...` copies primitives and blocks into `components/`. There is no runtime AtroUI dependency after install. Diff it. Fork it. Delete the pieces you do not need. Branding is a file edit, not a CSS fight with someone else's specificity tree.

That is the same install model as shadcn, pointed at opinionated sections instead of only atoms. If you already think in registries, nothing about the workflow should feel foreign.

Sections, not just atoms

Primitives matter. Buttons, logos, and theme toggles keep a dark UI consistent. They are not enough when you need a marketing band that already knows how to sit in an App Router page.

AtroUI ships blocks with editable content objects at the top of each file: home heroes, site chrome, CTAs, and related bands. Change the copy and brand fields first. Preview. Ship the section. Then decide whether you want another block.

The visual system is deliberate on purpose: black canvas, electric blue `#0b7bff` / `#92dbe0`, glass surfaces, clear CTAs. Docs live in the brand kit if you want the tokens in one place.

Install should be boring

From the installation docs:

bash
npx shadcn@latest init
npx shadcn@latest registry add @atroui=https://www.atroui.com/r/{name}.json
npx shadcn@latest add @atroui/home-hero

Open the file that landed in your project. Edit `CONTENT` / `DEFAULT_BRAND`. Make the hero say what your product actually does. That first owned section is usually enough to feel the difference between renting UI and shipping it.

Browse the rest in the registry catalog and components index.

What ships in v1

Registry installs through the shadcn CLI, so ownership is the default path, not a special enterprise mode.

Blocks for home bands, chrome, and CTAs with top-of-file content objects.

Primitives for button, logo, and theme toggle.

Headless helpers for analytics, JSON-LD, and reviews on real product pages.

Host-bound tools for OG, thumbnail, and scope patterns that call your APIs, not ours. The same shape shows up in tools like the OG image generator on this site.

Start with the docs, then the changelog when something moves.

What AtroUI is not

It is not a locked npm theme you cannot open without fighting the package.

It is not a multi-page template marketplace. v1 is a catalog and a system, not a storefront of full sites.

It is not a replacement for shadcn/ui. Same install model, different job: opinionated sections and a dark-first brand kit on top of that workflow.

It is not a substitute for product thinking. You still own copy, routing, and what the product does.

If you need every edge case of every design system under the sun, or a black-box theme you never intend to open, this is probably not the tool. If you want the files in your repo and a coherent dark UI you can ship this week, try it.

Client sprints are the first production corpus

AtroUI is not a benchmark toy. It is extracted from interfaces we already ship for founders, and from patterns that power studio tools on makershot.tech.

iamk.xyz is the founder brand behind the craft. Makershot remains the studio for MVP sprints, AI integrations, and design system work when you want the whole product built, not only the UI layer.

The open catalog removes a false choice we kept seeing: copy a random gist, or commission a full system before you have a product. You can start with ownership either way.

Try one block

AtroUI is live at atroui.com.

bash
npx shadcn add @atroui/home-hero

Read the docs, measure it against your own pages, and tell us what is missing. Component requests and sharp edge cases are welcome through contact.

We shipped AtroUI so your next interface can start deliberate, not default.

Want this built for you?

Fixed-scope MVP sprints and AI integrations — same stack as this guide.