Sections
CTA band
A closing call to action, centered or split.
Installation
npx shadcn@latest add http://localhost:3000/r/cta-band.jsonMKT UI is not published yet, so this points at your local development server. Set NEXT_PUBLIC_REGISTRY_URL to the deployed origin to show the public command.
Also installs: container, section, cta-group.
Usage
import { Button } from "@/components/ui/button";
import { CtaBand } from "@/components/cta-band";
<CtaBand
surface="inverted"
layout="split"
title="Water where it shouldn't be?"
description="Call now for a same-day emergency slot, or send a quote request and we'll reply the same business day."
actions={
<>
<Button variant="secondary" asChild>
<a href="tel:+15125550142">Call (512) 555-0142</a>
</Button>
<Button variant="outline" asChild>
<a href="#quote">Request a quote</a>
</Button>
</>
}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title (required) | ReactNode | — | The ask. Short and specific beats clever. |
| description | ReactNode | — | One or two sentences. Say what happens after they act. |
| actions | ReactNode | — | Buttons or links, primary first. |
| eyebrow | ReactNode | — | Short label above the title. |
| note | ReactNode | — | Reassurance under the actions, e.g. "No obligation". |
| proof | ReactNode | — | A testimonial line, rating, or metric beside the copy. |
| layout | "centered" | "split" | "centered" | `split` puts copy left and actions right, which reads better between two dense sections. |
| surface | "default" | "muted" | "brand" | "inverted" | "brand" | Background treatment. |
| headingAs | "h2" | "h3" | "h2" | Heading level. |
Behavior
Outline buttons are restyled on the inverted surface. A default outline button is
a dark border with dark text, which is nearly invisible on near-black. The section
handles that itself rather than relying on every caller to remember — you can pass
variant="outline" on any surface and it will be readable.
layout="split" uses the full page width; centered drops to the narrow
container so a headline does not stretch into one long line.
Limitations
- No media variant. A CTA with a supporting image is planned but not implemented.
proofis an open slot, not a structured prop.- Use
invertedonce per page at most. Two competing high-contrast bands cancel each other out.
Related
- Composition — alternating surfaces down a page