CTA banner

The simplest ask: one banner with a gradient hairline around a soft tint, the promise on one side and two actions on the other.

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

When to use

The simplest ask: one banner with the promise on one side and two actions on the other.
The end of a page or between sections, where one more nudge helps.

When not to use

The last section of a landing page, where one ask should stand out: CTA centered.
Asks that begin with an email: CTA with sign-up.

Usage

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

example.tsx

1import { CtaBanner } from "@/components/dashral/blocks/cta-banner"
2
3<CtaBanner
4  title="Ready when you are"
5  description="Free for 14 days. No card needed."
6  primary={{ label: "Start free", href: "/register" }}
7  secondary={{ label: "Talk to sales", href: "/contact" }}
8/>

API reference

CtaBanner

The simplest call to action: one banner, the ask on one side and the actions on the other. A gradient hairline around a soft tint of the same colors, so it stands out from the page without shouting. On phones the two stack, the main action first. Every part comes from props.

Prop	Type	Default
`eyebrow`	`React.ReactNode`	`"Free for small teams"`
`title`	`React.ReactNode`	`sample`
`description`	`React.ReactNode`	`sample`
`primary`	`BlockAction`	`sample`
`secondary`	`BlockAction \| null` The second button; null hides it.	`sample`

type BlockAction

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

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