---
title: CTA
description: Focused call-to-action sections for the next step.
group: Blocks
order: 19
---

Simple sections for the moment you need someone to take the next step. Change the message and actions to fit.

## Centered

A short headline, one supporting line, and two actions.

```tsx
"use client";

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

type Cta01Props = {
  className?: string;
};

export function Cta01({ className }: Cta01Props) {
  return (
    <section className={cn("@container w-full bg-background", className)}>
      <div className="mx-auto flex w-full max-w-2xl flex-col items-center px-4 py-12 text-center @[32rem]:px-6 @[32rem]:py-16">
        <h2 className="text-balance text-xl font-medium tracking-wide text-foreground @[32rem]:text-2xl">
          Ready to ship something that feels finished?
        </h2>
        <p className="mt-3 max-w-md text-pretty text-sm tracking-wide text-muted-foreground">
          Drop in blocks, restyle with your tokens, and keep moving.
        </p>
        <div className="mt-6 flex flex-wrap items-center justify-center gap-2">
          <Button type="button" size="sm">
            Get started
          </Button>
          <Button type="button" size="sm" variant="ghost">
            Browse blocks
          </Button>
        </div>
      </div>
    </section>
  );
}
```

### Installation

```bash
npx @arctis-sh/@arctis-sh/ui@latest add cta-01
```

### Usage

```tsx
import { Cta01 } from "@/components/blocks/cta/cta-01"
```

```tsx
<Cta01 />
```

## Split card

Copy on the left and actions on the right, held together in a filled card.

```tsx
"use client";

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

type Cta02Props = {
  className?: string;
};

export function Cta02({ className }: Cta02Props) {
  return (
    <section className={cn("@container w-full bg-background", className)}>
      <div className="mx-auto w-full max-w-4xl px-4 py-10 @[32rem]:px-6 @[32rem]:py-14">
        <div
          data-slot="block-split"
          className="flex flex-col gap-6 rounded-xl bg-muted p-6 @[40rem]:flex-row @[40rem]:items-center @[40rem]:justify-between @[40rem]:gap-10 @[40rem]:p-8"
        >
          <div className="min-w-0 max-w-md">
            <h2 className="text-xl font-medium tracking-wide text-foreground @[32rem]:text-2xl">
              Start building today
            </h2>
            <p className="mt-2 text-sm tracking-wide text-muted-foreground">
              Install a block, drop it in a page, and ship with your theme.
            </p>
          </div>
          <div className="flex shrink-0 flex-wrap items-center gap-2">
            <Button type="button" size="sm">
              Get started
            </Button>
            <Button type="button" size="sm" variant="outline">
              View pricing
            </Button>
          </div>
        </div>
      </div>
    </section>
  );
}
```

### Installation

```bash
npx @arctis-sh/@arctis-sh/ui@latest add cta-02
```

### Usage

```tsx
import { Cta02 } from "@/components/blocks/cta/cta-02"
```

```tsx
<Cta02 />
```

## Subscribe

A centered signup prompt with a filled email field and subscribe button.

```tsx
"use client";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { cn } from "@/lib/utils";

type Cta03Props = {
  className?: string;
};

export function Cta03({ className }: Cta03Props) {
  return (
    <section className={cn("@container w-full bg-background", className)}>
      <div className="mx-auto w-full max-w-3xl px-4 py-10 @[32rem]:px-6 @[32rem]:py-14">
        <div className="flex flex-col items-center text-center">
          <h2 className="text-xl font-medium tracking-wide text-foreground @[32rem]:text-2xl">
            Stay in the loop
          </h2>
          <p className="mt-2 max-w-md text-sm tracking-wide text-muted-foreground">
            New blocks and release notes when they ship. No spam.
          </p>
          <form
            className="mt-6 flex w-full max-w-md flex-col gap-2 @[32rem]:flex-row @[32rem]:items-center"
            onSubmit={(event) => event.preventDefault()}
          >
            <Input
              name="email"
              type="email"
              placeholder="you@company.com"
              aria-label="Email"
              className="h-9 min-h-9 max-h-9 flex-1 border-0 bg-muted py-0"
            />
            <Button
              type="submit"
              className="h-9 min-h-9 max-h-9 w-full shrink-0 whitespace-nowrap @[32rem]:w-auto"
            >
              Subscribe
            </Button>
          </form>
        </div>
      </div>
    </section>
  );
}
```

### Installation

```bash
npx @arctis-sh/@arctis-sh/ui@latest add cta-03
```

### Usage

```tsx
import { Cta03 } from "@/components/blocks/cta/cta-03"
```

```tsx
<Cta03 />
```