CTA footer

A last call to action on a soft glow with the reassurance under it, then the links and the copyright.

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

When to use

A last call to action on a soft glow, then the links and the copyright.
Landing pages that end on one more ask.

When not to use

Pages that already end on a call-to-action section: two asks in a row read as pushy.
Inside an app: Simple footer.

Usage

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

example.tsx

1import { CtaFooter } from "@/components/dashral/blocks/cta-footer"
2
3<CtaFooter
4  title="Start in five minutes"
5  primary={{ label: "Start free", href: "/register" }}
6  brand={{ name: "Acme", href: "/" }}
7  columns={footerColumns}
8/>

API reference

CtaFooter

The end of a landing page: a last call to action on a soft glow — the promise, the main action and the reassurance under it — then the brand, three columns of links and the copyright. Every part comes from props.

Prop	Type	Default
`title`	`React.ReactNode`	`sample`
`description`	`React.ReactNode`	`sample`
`primary`	`BlockAction`	`sample`
`secondary`	`BlockAction \| null` The second button; null hides it.	`sample`
`note`	`React.ReactNode` A line under the buttons; none hides it.	`sample`
`brand`	`{ name: string; href: string; tagline?: string; logo?: React.ReactNode }`	`sample`
`columns`	`{ title: string; links: FooterLink[] }[]`	`sample`
`copyright`	`string` The copyright line (© this year and the brand without it).	—
`legal`	`FooterLink[]`	`sample`

type BlockAction

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

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

type FooterLink

A link in the footer.

Prop	Type	Default
`label`	`string`	—
`href`	`string`	—