Plain split call to action: heading and description on the left, a primary and an outline button beside them on wide screens and below on narrow ones. Theme tokens only, light and dark.
import { cn } from "cn"
import { Heading } from "@/components/editorial/heading"
import {
Section,
SectionActions,
SectionDescription,
SectionHeader,
SectionTitleGroup,
} from "@/components/editorial/section"
import { buttonVariants } from "@/components/ui/button"
// The copy: change text here, not in the markup.
const COPY = {
title: "Ready when your team is",
body: "Set up a workspace in a few minutes and invite the people you work with.",
primary: { label: "Start free", href: "#" },
secondary: { label: "Talk to us", href: "#" },
} as const
// The buttons sit under the copy until the section is 64rem wide, then move
// beside it at their full width, with the gutter between.
export default function MinimalCta02() {
return (
<Section>
<SectionHeader className="@5xl/section:max-w-none @5xl/section:grid-cols-[minmax(0,1fr)_max-content] @5xl/section:items-end @5xl/section:gap-x-(--gutter)">
<SectionTitleGroup>
<Heading>{COPY.title}</Heading>
<SectionDescription>{COPY.body}</SectionDescription>
</SectionTitleGroup>
<SectionActions>
<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: "outline", size: "lg" }))}
>
{COPY.secondary.label}
</a>
</SectionActions>
</SectionHeader>
</Section>
)
}
pnpm dlx shadcn add @01orbital/minimal-cta-02npx shadcn add @01orbital/minimal-cta-02yarn shadcn add @01orbital/minimal-cta-02bunx --bun shadcn add @01orbital/minimal-cta-02Free under the MIT license. Add the @01orbital registry to components.json once (install guide), then run the command.
It lands at components/blocks/cta/minimal-cta-02/index.tsx, as source you own and edit.
import MinimalCta02 from "@/components/blocks/cta/minimal-cta-02"
export default function Example() {
return <MinimalCta02 />
}npm: cn. The CLI installs them for you.
Registry pieces it installs with it:
Minimal Centered CTA
Plain centered call to action: a heading, a description and a primary and an outline button. Theme tokens only, light and dark.
Split CTA with Limb Scene
Two-column CTA with eyebrow, large heading, description and primary plus ghost buttons beside a rounded 4:3 media frame holding a Limb scene in meridian framing.