CTA band

A slim call to action on a hairline band: one line and one action.

npx shadcn@latest add https://ui.goodtabs.co/r/cta-band.json

With the @goodtabs namespace in components.json: npx shadcn@latest add @goodtabs/cta-band

Ship the first screen today

A short line with a single button.

With a secondary action

Questions before you commit? Read the docs or book a call.

Outline and primary buttons side by side.

Usage

import { CtaBand } from "@/components/cta-band"
import { Button } from "@/components/ui/button"

<CtaBand title="Ship the first screen today" action={<Button>Start free</Button>} />

Props

Prop	Type	Default	Description
title	ReactNode		One line that says what happens next.
action	ReactNode		Usually one button; two at most.

Source

cta-band/cta-band.tsx

import * as React from "react";
import { cn } from "@/lib/utils";

type CtaBandProps = Omit<React.ComponentProps<"section">, "title"> & {
  /** One line. Say what happens next, not what the product is. */
  title: React.ReactNode;
  /** Usually one button. */
  action: React.ReactNode;
};

/**
 * A slim call to action on a hairline band: one line on the left, one action on the right.
 * Stacks on a phone. Server component.
 */
export function CtaBand({ title, action, className, ...props }: CtaBandProps) {
  return (
    <section data-slot="cta-band" className={cn("w-full border-y bg-background", className)} {...props}>
      <div className="mx-auto flex max-w-6xl flex-col gap-4 px-6 py-6 sm:flex-row sm:items-center sm:justify-between md:px-8">
        <p className="m-0 text-base font-medium tracking-tight text-balance sm:text-lg">{title}</p>
        <div className="flex shrink-0 items-center gap-2">{action}</div>
      </div>
    </section>
  );
}

For AI agents

Hand your agent this page, the markdown at /components/cta-band/prompt.md, or the Copy AI prompt button above.

When to use

Between sections or above the footer, when the ask is one line
Where a full closing section would be too loud

When not to use

As the page's main closing moment, which wants a bigger section
With a paragraph of copy; keep it to one line

Agent notes

Server component; pass buttons from @/components/ui/button into action
Full width with border-y; the content sits in max-w-6xl
Stacks below sm so the button sits under the line