CTA section

A call to action as a centered closing section, a split beside a setup card that completes itself, or a dismissible banner.

$npx shadcn@latest add @silicon-ui/cta-section

Installation

$npx shadcn@latest add @silicon-ui/cta-section

Install the dependencies.
$npm install lucide-react motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/blocks/cta-section/cta-section.tsx
- components/silicon-ui/blocks/cta-section/cta-section-data.ts
- components/silicon-ui/lib/media.ts shared
- components/silicon-ui/blocks/cta-section/cta-section.module.css
- components/silicon-ui/segmented-control/segmented-control.tsx shared
- components/silicon-ui/segmented-control/segmented-control.module.css shared
- components/silicon-ui/button/button.tsx shared
- components/silicon-ui/button/button.module.css shared
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Source codetsx

import { CtaSection } from "@/components/silicon-ui/blocks/cta-section/cta-section";

Prop	Type	Default
`variant` `centered` is a closing section, `split` sits beside a product visual, `banner` is one dismissible line.	`CtaVariant` `"banner""split""centered"`	`"centered"`
`title`	`string`	—
`description`	`string`	—
`primaryAction`	`CtaAction`	—
`secondaryAction` Not shown in the banner variant. Pass null to hide it.	`CtaAction \| null`	—
`note` Small print under the actions in the centered variant, such as "No credit card required".	`string`	—
`faces` Faces beside the note in the centered variant. Pass an empty array to hide them.	`string[]`	`ctaFaces`
`points` Short benefit lines in the split variant.	`string[]`	—
`visual` Replaces the split variant's setup card.	`ReactNode`	—
`onDismiss` Banner only: shows a dismiss button and calls this after it closes.	`() => void`	—
`className`	`string`	—

Also accepts the props of HTMLAttributes.