Plain centered call to action: a heading, a description and a primary and an outline button. 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: "Start from something that already works",
body: "Pick a component, read how it is built, and adjust it to the project in front of you.",
primary: { label: "Get started", href: "#" },
secondary: { label: "Read the guide", href: "#" },
} as const
export default function MinimalCta01() {
return (
<Section>
<SectionHeader size="lg" align="center">
<SectionTitleGroup>
<Heading>{COPY.title}</Heading>
</SectionTitleGroup>
<SectionDescription>{COPY.body}</SectionDescription>
<SectionActions align="center">
<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-01npx shadcn add @01orbital/minimal-cta-01yarn shadcn add @01orbital/minimal-cta-01bunx --bun shadcn add @01orbital/minimal-cta-01Free 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-01/index.tsx, as source you own and edit.
import MinimalCta01 from "@/components/blocks/cta/minimal-cta-01"
export default function Example() {
return <MinimalCta01 />
}npm: cn. The CLI installs them for you.
Registry pieces it installs with it:
Grained Coral Gradient CTA
Pinned-dark CTA on a grained coral gradient panel, with a Marcellus headline and subheading beside a large round teal button lit like a ball. Full bleed on phones; copy comes in as props.
Minimal Split CTA
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.