Skip to content

Call to Action Band

beta

The closing band of a marketing page, above the footer: a big two-tone headline, one short line, and a main action with an optional second one.

Built from Button and Button Variants.

Preview

Plan the week with your team, all in one place.

Invite people, share the calendar, and see who is coming.

See pricingCreate a workspace

split, words on the start side and actions on the end

Questions about a plan? Send us a message.

Someone on the team replies by email.

See the FAQWrite to us

centered, one action, no art

Ready when you are. Set up takes a few steps.

Create a workspace

split over a Dot Field, one action

Plan the week with your team, all in one place.

Invite people, share the calendar, and see who is coming.

Create a workspace

narrow container

Plan the week with your team, all in one place.

Invite people, share the calendar, and see who is coming.

See pricingCreate a workspace

Install

  1. 1. Add the registry to components.json, once per app. Without it, the shadcn CLI looks up @arbokui in a public list that Arbokui does not control.

    npx shadcn@latest registry add "@arbokui=https://arbokui.com/r/{name}.json"

  2. 2. Add the theme, once per app. It replaces your color tokens with ones checked for contrast.

    npx shadcn@latest add @arbokui/theme

  3. 3. Add the website component. It also adds every component it uses. Its own files go in your components folder, and they are yours to edit.

    npx shadcn@latest add @arbokui/call-to-action-band

Use it for

  • The last section of a landing page or a page of a site, right above the Footer.
  • Put the claim in `title` and the rest in `muted`, so the eye reads the claim first.
  • Give one main `action`, like Create a workspace, and at most one quieter `secondaryAction`, like See pricing.
  • An action with `href` is a link. Pass your router's link through `renderLink`, like next/link, so it stays client-side. An action with `onClick` is a button.
  • Use `layout="split"` for a band with the words on the start side and the actions on the end side, and the default center for a band down the middle.
  • Pass a Dot Field as `art` for a louder band. The band fades it out behind the words.
  • The headline is set in the theme's `font-headline`. Load Geist Serif as `--font-geist-serif`, like `geist/font/serif/variable` in Next.js, or it falls back to the system serif.

Avoid it for

  • The top of a page. Use Hero, which holds the page's h1.
  • A section headline with no actions. Use Headline.
  • A next step inside an app's own screen, like inviting a team. Use Call To Action, the card.
  • Three or more actions. Keep one main action and one quieter one at most.
  • A long description. Keep it to one line, and put the rest in the page above.

Props

  • title

    The words that land first, in full ink. It is an h2.

    ReactNode

  • muted

    The words that follow in gray, on the same line.

    ReactNode

  • description

    One short line under the headline.

    ReactNode

  • action

    The main action, a large brand button. With `href` it is a link drawn by `renderLink`. It comes last in the row.

    { label: string; href?: string; onClick?: () => void }

  • secondaryAction

    A quieter second action, a large ghost button just before the main one.

    { label: string; href?: string; onClick?: () => void }

  • layout

    "center" stacks everything down the middle. "split" puts the words on the start side and the actions on the end side once the band is wide, and stacks them when it is narrow.

    "center" | "split" · default "center"

  • art

    Your art behind the band, like a Dot Field. The band adds room around the words and fades the art out behind them. It comes up to full strength on hover.

    ReactNode

  • renderLink

    Draws each action that has an `href`. It gets href, className, children, and data-slot. Spread them onto your router's link.

    (props: CallToActionBandLinkProps) => ReactNode · default a plain <a>

  • className

    Extra classes on the section, which holds the container query.

    string

Accessibility

  • The headline is an h2, and the gray part is inside it, so screen readers hear one sentence.
  • The gray is muted-foreground, which the theme checks at 4.5:1 on the page.
  • An action with `href` is a real link, styled as a button. One with `onClick` is a real button.
  • The main action comes last, so Tab reaches the quieter one first and the main one at the end of the band.
  • The art is aria-hidden, since it is decoration, and it never takes a press.
  • Both buttons are 44px tall at the default density, so they fit a thumb.

Examples

Two links at the end of a page

<CallToActionBand
  title="Plan the week with your team,"
  muted="all in one place."
  description="Invite people, share the calendar, and see who is coming."
  action={{ label: "Create a workspace", href: "/signup" }}
  secondaryAction={{ label: "See pricing", href: "/pricing" }}
  renderLink={(props) => <Link {...props} />}
/>

Split, with a button that opens a form

<CallToActionBand
  layout="split"
  title="Questions about a plan?"
  muted="Send us a message."
  action={{ label: "Write to us", onClick: () => setOpen(true) }}
/>

Over a Dot Field

<CallToActionBand
  title="Plan the week with your team,"
  muted="all in one place."
  action={{ label: "Create a workspace", href: "/signup" }}
  art={<DotField bands={["var(--chart-1)", "var(--chart-2)"]} />}
/>