AtroUI indie site kit: portfolio chrome you can own

AtroUI launched as a dark-first studio catalog: heroes, pricing, Host APIs, marketing bands pulled from work we actually ship on client sprints. That remains the Blocks story on atroui.com.

Indie founders and builders also need a different altitude. Not another max-w-7xl marketing shell. A quiet column. Mono stamps. A ⌘K palette. A ship log. A portrait hero. The language of a personal homepage that still feels production-ready.

We already lived in that language on a personal site. This week we extracted it into AtroUI as the indie site kit: same registry install model, same tokens, a second chrome language you own in your repo.

This essay is the studio note. The catalog walkthrough is on the AtroUI blog.

Why a second kit

Studio Blocks assume a wide editorial frame: border-x shells, loud CTAs, package pricing. Portfolio and indie product sites often want the opposite: roughly 640px reading width, hairline rules, status rows, and tools that feel like a homepage you maintain yourself.

Shipping both styles is intentional. Site Header and Site Header Narrow are different products. Same for footer and theme toggle. Pick the language that matches the site you are shipping. Do not force a studio landing into a personal column, or the reverse.

In the AtroUI docs sidebar the kit lives under Indie. Component IDs stay stable (@atroui/personal-hero, @atroui/command-menu, and so on) so installs do not churn when the nav label changes.

What shipped under Indie

Chrome and motion: @atroui/site-header-narrow, @atroui/site-footer-narrow, @atroui/theme-toggle-icon, @atroui/reveal (CSS IntersectionObserver reveal, no motion library dependency).

Home surfaces: @atroui/personal-hero (optional circular portrait), @atroui/currently, @atroui/project-list, @atroui/reading-shelf, @atroui/stack-list.

Ship in public: @atroui/log-preview, @atroui/changelog (tag filters, month groups).

Tools: @atroui/command-menu (cmdk, ⌘K), @atroui/social-float, @atroui/deadline-countdown and @atroui/count-up, @atroui/local-clock, @atroui/weather-chip (Open-Meteo, no API key), @atroui/resume.

Browse previews under Indie in the component catalog.

Also tightened in Blocks

Alongside the kit we fixed catalog trust and filled two common landing gaps:

Home Crafts (@atroui/home-crafts) is a real capabilities band again, not a pricing alias. Pair it with Pricing Overview when you need a rate card.

Feature Grid and Logo Cloud ship as CONTENT-driven landing blocks. They stay off the atroui.com homepage until there is real social proof worth showing. Install them when your product site needs pillars or partner marks.

Site Footer is no longer an alias of Bold Footer. Quiet chrome and loud wordmark footer are distinct demos again.

Install

Same CLI as everything else in the catalog. No Host API package required for these UI blocks. Registry-only is enough.

# Indie chrome
npx shadcn@latest add @atroui/site-header-narrow @atroui/site-footer-narrow

# Homepage slice
npx shadcn@latest add @atroui/personal-hero @atroui/currently @atroui/project-list

# Command palette (needs cmdk)
npx shadcn@latest add @atroui/command-menu

# Studio landing extras
npx shadcn@latest add @atroui/home-crafts @atroui/feature-grid

Edit the top-level CONTENT (and lists) after install. For Personal Hero, set imageSrc to your portrait path. For Command Menu, mount once in the root layout; it listens for ⌘K / Ctrl+K.

If you also need forms or AI routes, keep the install-mode story straight: registry UI only for these sections; npm atroui only when you add Host API stubs. See the Host APIs essay: AtroUI Host APIs.

What we did not do

We did not replace studio Blocks. We did not paste fake testimonials onto atroui.com. We did not ship a personal brand mark as AtroUI identity.

The kit is for builders who want the portfolio altitude in their git history. Compose it with studio sections when a product page needs both.

From a real homepage

The patterns came from a live personal site (ship log JSON, narrow chrome, currently rows, reading shelf), not a Figma moodboard. That is the AtroUI rule: extract what we already run, then publish it so you can own the files.

Makershot remains the studio when you want the full product built. AtroUI remains the open catalog when you want the layer in your repo.

Where to go next

Open the Indie section on atroui.com and click through previews.

Read the catalog post: Indie site kit.

Read Installation if you are new to the registry.

Read Host APIs if forms and AI tools are next.

Want the whole product, not only the UI layer? MVP sprints, AI integrations, and design system work on a fixed scope at makershot.tech.

Own the files. Pick the altitude. Bring your own keys when you need Host APIs.