Plain left-aligned hero: a small eyebrow, a large headline, a description and a primary and a ghost button. Theme tokens only, light and dark.
import { cn } from "cn"
import {
Hero,
HeroActions,
HeroContainer,
HeroContent,
HeroDescription,
HeroHeading,
} from "@/components/editorial/hero"
import { buttonVariants } from "@/components/ui/button"
// The copy: change text here, not in the markup.
const COPY = {
eyebrow: "Orbcore for teams",
title: "One place for the plan, the review and the handoff",
body: "Owners, dates and decisions stay with the work, so the next person always knows what changed and why.",
primary: { label: "Start free", href: "#" },
secondary: { label: "Book a demo", href: "#" },
} as const
export default function MinimalHero02() {
return (
<Hero>
<HeroContainer variant="stack" className="py-24">
<HeroContent className="max-w-3xl">
<p className="text-sm font-medium text-muted-foreground">
{COPY.eyebrow}
</p>
<HeroHeading>{COPY.title}</HeroHeading>
<HeroDescription className="text-muted-foreground">
{COPY.body}
</HeroDescription>
<HeroActions>
<a
href={COPY.primary.href}
data-slot="button"
className={cn(buttonVariants({ size: "lg" }))}
>
{COPY.primary.label}
</a>
<a
href={COPY.secondary.href}
data-slot="button"
className={cn(buttonVariants({ variant: "ghost", size: "lg" }))}
>
{COPY.secondary.label}
</a>
</HeroActions>
</HeroContent>
</HeroContainer>
</Hero>
)
}
pnpm dlx shadcn add @01orbital/minimal-hero-02npx shadcn add @01orbital/minimal-hero-02yarn shadcn add @01orbital/minimal-hero-02bunx --bun shadcn add @01orbital/minimal-hero-02Free under the MIT license. Add the @01orbital registry to components.json once (install guide), then run the command.
It lands at components/blocks/hero/minimal-hero-02/index.tsx, as source you own and edit.
import MinimalHero02 from "@/components/blocks/hero/minimal-hero-02"
export default function Example() {
return <MinimalHero02 />
}npm: cn. The CLI installs them for you.
Registry pieces it installs with it:
buttonheroMinimal Centered Hero
Plain centered hero: a small eyebrow, a large headline, a description and a primary and an outline button. Theme tokens only, light and dark.
Moon Hero with Changelog
Dark hero on a CornerBloom ground with a MoonSphere at top right on wider screens, a left-aligned headline and two buttons, and a four-entry changelog strip below with Geist Mono dates.