# Inline CTA

Invite an action inside a page, such as subscribing or upgrading.

Announcement with a photo and two actions

**Pro** — This example installs with a Siteplane UI Pro license key. Get a license on the [Pro page](/pricing).

```bash
pnpm dlx shadcn@4.18.0 add @siteplane-pro/inline-cta-demo
```

This Pattern is part of [Siteplane UI Pro](/pricing), and its source comes with a [Pro license](/docs/license/#patterns). Its previews are free to view and try.

## Installation

**Pro** — Installs with a Siteplane UI Pro license key. Complete the one-time [Pro setup](/docs/installation/#siteplane-ui-pro) first. Get a license on the [Pro page](/pricing).

```bash
pnpm dlx shadcn@4.18.0 add @siteplane-pro/inline-cta
```

With npm: `npx shadcn@4.18.0 add @siteplane-pro/inline-cta`.

## Usage

```tsx
import { Button } from "@/siteplane/components/button";
import { InlineCta } from "@/siteplane/components/inline-cta";

<InlineCta
  title="The new dashboard is here"
  description="Explore the new dashboard and faster page loads."
  actions={
    <>
      <Button>Dismiss</Button>
      <Button variant="accent">View changes</Button>
    </>
  }
/>;
```

## Composition

```text
InlineCta
├── media (optional)
├── title and description
├── children (optional)
│   ├── InlineCtaEmailForm
│   ├── InlineCtaPlan
│   ├── InlineCtaFeatures
│   └── InlineCtaDetail
└── actions (optional)
```

`InlineCta` supplies the card, the heading and the layout. The four panels are optional content for `children`; use one per CTA, or your own content.

## Announcement

Pass an image as `media` to place it beside the text from the `sm` breakpoint up, and above the text on narrow screens, as in the example at the top of the page. The image fills its area and is cropped to cover it. Without `media`, the text and the actions take the full width.

Put the main action last and give it `variant="accent"`; keep any secondary action neutral.

Announcement with two actions

**Pro** — This example installs with a Siteplane UI Pro license key. Get a license on the [Pro page](/pricing).

```bash
pnpm dlx shadcn@4.18.0 add @siteplane-pro/inline-cta-actions-example
```

## Email field

`InlineCtaEmailForm` is a labeled email field with a submit button. It uses the browser’s validation and calls `onSubscribe` with the address only when it is valid. Sending the request and showing the result are up to the application; this example replaces the form with a confirmation.

Newsletter subscription with an email field

**Pro** — This example installs with a Siteplane UI Pro license key. Get a license on the [Pro page](/pricing).

```bash
pnpm dlx shadcn@4.18.0 add @siteplane-pro/inline-cta-email-field-example
```

## Plan and features

### Plan summary

`InlineCtaPlan` shows one plan: an optional icon and the plan name, then the price, the billing period, a description and actions. The panel is nested in the CTA card. `variant="inset"`, the default, presses it into the card; `variant="elevated"` lifts it off with a soft shadow.

Plan summary with actions

**Pro** — This example installs with a Siteplane UI Pro license key. Get a license on the [Pro page](/pricing).

```bash
pnpm dlx shadcn@4.18.0 add @siteplane-pro/inline-cta-change-plan-example
```

### Feature list

`InlineCtaFeatures` lists what a plan includes, each item with a check icon, a title and an optional description. Put the actions in the `actions` prop of the card.

Upgrade prompt with a feature list

**Pro** — This example installs with a Siteplane UI Pro license key. Get a license on the [Pro page](/pricing).

```bash
pnpm dlx shadcn@4.18.0 add @siteplane-pro/inline-cta-upgrade-plan-example
```

## Details

`InlineCtaDetail` shows one item with an optional icon, a title, a description, further lines as children and actions at the end. Its actions wrap below the text on narrow screens.

### Payment method

Payment method with an edit action

**Pro** — This example installs with a Siteplane UI Pro license key. Get a license on the [Pro page](/pricing).

```bash
pnpm dlx shadcn@4.18.0 add @siteplane-pro/inline-cta-payment-method-example
```

### Invoice

Use a [File Type Icon](/docs/components/file-type-icon/) as the icon to point at a document.

Invoice with download and view actions

**Pro** — This example installs with a Siteplane UI Pro license key. Get a license on the [Pro page](/pricing).

```bash
pnpm dlx shadcn@4.18.0 add @siteplane-pro/inline-cta-receipt-example
```

## API reference

### InlineCta

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| title | ReactNode | required | Heading text that names the section, an h3 unless titleLevel sets another level. |
| titleLevel | 1 \| 2 \| 3 \| 4 \| 5 \| 6 | 3 | Heading level of the title, with the same look at every level. Match it to the CTA's place in the page outline. |
| description | ReactNode | unset | Supporting text under the title. |
| media | ReactNode | unset | Image beside the text from the sm breakpoint up and above it below that. A direct img child fills the area and is cropped to cover. |
| children | ReactNode | unset | Content between the description and the actions, such as one of the panels below. |
| actions | ReactNode | unset | Buttons below the content. They wrap on narrow screens. |

InlineCtaProps extends native section props except `title`, so `className`, `id` and `aria-*` reach the section.

### InlineCtaEmailForm

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| label | string | required | Visible label of the email field. |
| submitLabel | string | required | Text of the submit button. |
| placeholder | string | unset | Placeholder of the email field. |
| onSubscribe | (email: string) => void | required | Called with the address after the browser’s validation passes. |
| disabled | boolean | false | Disables the field and the button, for example while the request is sent. |

### InlineCtaPlan

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| name | ReactNode | required | Plan name in the panel header. |
| icon | ReactNode | unset | Decorative icon before the name, in a 32 px box. |
| price | ReactNode | required | Price, shown large. Format it yourself. |
| period | ReactNode | unset | Billing period beside the price. |
| description | ReactNode | unset | Text under the price. |
| actions | ReactNode | unset | Buttons at the bottom of the panel. |
| variant | inset \| elevated | inset | Card surface of the panel inside the CTA card. |

### InlineCtaFeatures

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| items | readonly { title: ReactNode; description?: ReactNode }[] | required | The list entries, each with a check icon. |

### InlineCtaDetail

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| icon | ReactNode | unset | Icon or FileTypeIcon before the text, in a 36 px column. An icon without its own size is 20 px and centers on the title. |
| title | ReactNode | required | Main line of the item. |
| description | ReactNode | unset | Line under the title. |
| children | ReactNode | unset | Further lines under the description. |
| actions | ReactNode | unset | Buttons at the end of the item. |
| variant | inset \| elevated | inset | Card surface of the panel inside the CTA card. |

The four panels take only the props listed here: no `className`, native props or ref. Compose your own content in `children` for any other arrangement.

## Usage notes

Use an Inline CTA for one invitation within the flow of a page, next to the content it relates to. For a message about the state of the page use an [Alert](/docs/components/alert/), and for a decision that must interrupt the task use a [Dialog](/docs/components/dialog/).

The section is named by its title, so give each CTA on a page a distinct one. Describe a photo in `alt`, or use `alt=""` when it is only decoration.

Dismissing, subscribing, upgrading and paying belong to the application. Remove the CTA and remember the choice when it is dismissed, send the request in `onSubscribe`, and format prices and dates yourself. The panels only arrange what you pass them.