CTA centered

The promise and two actions on a soft glow, with what's included and the people already using it.

$ pnpm dlx shadcn@latest add @dashral/cta-centered

When to use

The promise and two actions on a soft glow, with what's included and the people already using it.
The last section of a landing page.

When not to use

Between sections, where a whole section would interrupt the page: CTA banner.
Sign-ups that start with an email: CTA with sign-up.

Usage

CTA centered with your own data: every prop has the sample as its default, so pass only what you have.

example.tsx

1import { CtaCentered } from "@/components/dashral/blocks/cta-centered"
2
3<CtaCentered
4  title="Start building today"
5  primary={{ label: "Start free", href: "/register" }}
6  promises={["14-day trial", "No card needed", "Cancel anytime"]}
7  people={avatars}
8/>

API reference

CtaCentered

A call to action between sections of a landing page: the promise and two actions on a soft glow, with the people already using it under them. Every part comes from props.

Prop	Type	Default
`badge`	`React.ReactNode` The pill above the heading; none hides it.	`sample`
`title`	`React.ReactNode`	`sample`
`description`	`React.ReactNode`	`sample`
`primary`	`BlockAction`	`sample`
`secondary`	`BlockAction \| null` The second button; null hides it.	`sample`
`promises`	`string[]` Short promises under the buttons; none hides the row.	`sample`
`people`	`{ name: string; src?: string }[]` The people already using it, and their rating; no people hides the row.	`sample`
`rating`	`React.ReactNode`	`sample`

type BlockAction

A button: a link with href, or your handler with onClick.

Prop	Type	Default
`label`	`string`	—
`href`	`string`	—
`onClick`	`() => void`	—