CTA section
A call to action as a centered closing section, a split beside a setup card that completes itself, or a dismissible banner.
pnpm dlx shadcn@latest add @uiarc/cta-sectionLive block · sample data
- The last section of a landing page, asking for a trial or demo.
- An in-page prompt beside a product visual that shows the outcome.
- A slim promotional banner above content.
- The first screen of a page. Use Hero section.
- Collecting an email. Use Newsletter signup.
- A persistent site-wide notice. Use Announcement bar.
Installation
Add CTA section with the shadcn CLI, or copy the source by hand.
pnpm dlx shadcn@latest add @uiarc/cta-sectionAdds the block and its local dependencies, and installs motion, lucide-react. First time? Add the @uiarc registry to components.json, or use the full URL:
Usage
Use this to ask for a trial, demo or signup. Pass href or onClick to each action; edit sample copy in cta-section-data.ts. Buttons in the preview confirm in place.
example.tsx
import { CtaSection } from "@/registry/blocks/cta-section/cta-section"; export function Closing() { return ( <CtaSection variant="split" title="Your team, set up before lunch" primaryAction={{ label: "Create a workspace", href: "/signup" }} secondaryAction={{ label: "Book a demo", href: "/demo" }} points={["Import from any tracker", "SSO included", "Cancel anytime"]} /> );}CtaSection
A call to action in three shapes chosen by variant: a centered closing section, a split layout beside a product visual, and a compact dismissible banner.
PropTypeDefaultDescription
variant"centered" | "split" | "banner""centered"centered closes a page, split sits beside a setup card that completes itself, banner is one line with an action.titlestring–Heading. Each variant has sample copy.descriptionstring–One sentence under the heading.primaryActionCtaAction–{ label, href?, onClick?, confirmedLabel? }. With href it renders a link; with neither href nor onClick it confirms in place.secondaryActionCtaAction | null–Second action in centered and split. Pass null to hide it.notestring"No credit card required"Small print under the actions in centered.facesstring[]–Up to four avatar URLs beside the note in centered. Pass [] to hide them.pointsstring[]–Benefit lines with checks in split.visualReactNode–Replaces the split variant's setup card, for your own screenshot or component.onDismiss() => void–Banner only. Shows the dismiss button and is called after the banner has closed.classNamestring–Extra class on the section.- Tab
- Moves through the actions, then the dismiss button in the banner.
- EnterorSpace
- Runs an action or dismisses the banner.
- Each variant is a section labelled by its heading.
- Actions with href are real links; others are buttons. Simulated confirmations announce politely.
- The dismiss button has the name "Dismiss"; the banner closes its gap so focus order stays clean.
- The setup card is aria-hidden: the copy beside it carries the message.
- Primary actions lean their arrow forward on hover; buttons press to .97 and morph their width when the label changes.
- Split: the stage rises into view once, then the setup card ticks its three steps, fills its progress line, and slides in teammates' faces.
- Banner: dismissing fades it, scales it to .98, and springs its height closed so the page below moves up smoothly.
- Reduced motion shows the finished setup card and removes travel.
- Split stacks copy above the visual below 860px container width.
- Below 560px actions go full width and stack, and the banner puts its text above the action and dismiss button.
- Headings scale with the container between 30px and 52px.
- The setup card runs three timers once after it enters view; everything else is CSS transitions.
- No images except up to four small avatars.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use centered at the end of a landing page, split mid page next to a relevant product state, and banner at the top of an app or docs page.
- Pass href for real navigation. Leave both href and onClick out only for previews.
- One primary and at most one secondary action. Keep labels to two or three words with a verb.
- Edit cta-section-data.ts for the sample copy and the setup card content.
The full library index for assistants is at /llms.txt.
