CTA Band
Closing call to action: centered, split with email capture, or boxed with a token glow.
pnpm dlx @glinui/cli@latest add cta-bandReady?
Ship a page you are proud of
Start with the blocks, change the tokens.
Installation
pnpm dlx @glinui/cli@latest add cta-bandPrefer the package?
Usage
The glow uses the `--glow-a` and `--glow-b` tokens (no rainbow). Pass `background` to place a gradient mesh or aurora behind the content.
Variants
Centered, split with email capture, plain shell.
<CtaBand layout="split" title="Join" emailCapture={{ onSubmit }} />States
Glow can be forced on any layout with `glow`.
<CtaBand glow title="Glow" />In a layout
Closing section before the footer.
Trusted by builders
Placeholder quote: the setup took an afternoon and the team stopped asking where the buttons came from.
Placeholder quote: accessible by default, which saved us a long audit.
Placeholder quote: the tokens made dark mode a one line change.
FAQ
Start today
<CtaBand title="Start today" />Accessibility
- Section labelled by its heading.
- Email input has a screen reader label and autocomplete.
- Glow and background are aria-hidden and hidden in forced colors.
Reduced Motion
The band is static, there is no animation.
API Reference
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
layout | CtaBandLayout | No | centered | Layout of the band. |
variant | BlockVariant | No | ambient (glinr) | Shell look. `plain` under the minimal style, `glass` is opt-in and needs a backdrop. |
title / description / eyebrow | ReactNode | - | - | Copy. The title labels the section. |
primary / secondary | CtaAction | - | - | Link buttons: label plus anchor attributes (href, rel, target). |
emailCapture | CtaEmailCapture | No | - | Built-in email form with onSubmit(email). |
glow | boolean | No | true for boxed-gradient | Token glow layer. |
background / footnote | ReactNode | - | - | Decorative slot and fine print. |
background | React.ReactNode | No | - | Decorative background slot such as a gradient mesh. Rendered aria-hidden behind the content. |
description | React.ReactNode | No | - | Auto-generated from TypeScript source. |
eyebrow | React.ReactNode | No | - | Auto-generated from TypeScript source. |
footnote | React.ReactNode | No | - | Free slot under the actions, for a custom form or fine print. |
primary | CtaAction | No | - | Auto-generated from TypeScript source. |
secondary | CtaAction | No | - | Auto-generated from TypeScript source. |
title | React.ReactNode | Yes | - | Auto-generated from TypeScript source. |
Source
Import directly from the package or browse the source on GitHub. Click any file to view it.
Import
import { CTABand } from "@glinui/ui"Source Files
Dependencies
@glinui/uiGenerated API Snapshot
Beta
Generated API Snapshot
BetaAuto-extracted from TypeScript source in packages/ui/src/components/cta-band.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.
Generated: 2026-10-08T01:41:21.546Z · Full index: /docs/api-metadata
Primary Props Type
CtaBandProps
CtaBandProps
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
background | React.ReactNode | No | - | Decorative background slot such as a gradient mesh. Rendered aria-hidden behind the content. |
description | React.ReactNode | No | - | - |
emailCapture | CtaEmailCapture | No | - | Built-in email capture form (the split layout shows it in place of the actions). |
eyebrow | React.ReactNode | No | - | - |
footnote | React.ReactNode | No | - | Free slot under the actions, for a custom form or fine print. |
glow | boolean | No | - | Soft token glow behind the content. On by default for `boxed-gradient`. |
layout | CtaBandLayout | No | "centered" | - |
primary | CtaAction | No | - | - |
secondary | CtaAction | No | - | - |
title | React.ReactNode | Yes | - | - |
variant | BlockVariant | No | - | Shell look. Omit to follow the ambient style. |