Block · CLI
Hero
CONTENT-driven homepage hero. Install as @atroui/home-hero.
Preview
npx shadcn@latest add @atroui/home-heroOne-person studio · May sprints open
Stop losing weeks to boilerplate.
We ship the product you were going to build next month - this week. Fixed scope. Fixed price. No PMs. No handoffs.
Koustav
Founder · every line of code
atroui.com/og
Ship in days, not quarters.
AtroUI - studio + free AI tools
7-day sprint
Day 4 / 7- 01Scope + stack
- 02Auth + data
- 03Core flow
- 04AI feature(current day)
- 05Polish UI
- 06Deploy
- 07Handoff
Installation
Agent blurb — install command + no npm UI rule. For agents
npx shadcn@latest add @atroui/home-heroSource lands in your repo. Installation · Registry
Usage
Mount once at the top of a marketing homepage. After install, edit the CONTENT object at the top of the file — do not fork props for every string. Full-bleed section; pair with site header chrome above it.
tsx
import { HomeHero } from "@/components/blocks/home-hero"
export function Example() {
return <HomeHero />
}Replace a generic landing hero with owned source
Edit CONTENT for headline, proof line, and CTAs. The block is the AtroUI default install example because it is a full section, not a button. Pair with site-header and a Host API form when the page must convert.
FAQ1
- Can I change the copy without a theme API?
- Yes. After shadcn add, the file is yours. CONTENT and DEFAULT_BRAND sit at the top. Chrome uses getBrand() / NEXT_PUBLIC_SITE_*.
Part of Dark marketing sections for Next.js.
Hero