Inline CTA · Siteplane UI

The new dashboard is here

Explore the new dashboard and faster page loads.

Pro

This example installs with a Siteplane UI Pro license key.

Get a license on the Pro page.

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

This Pattern is part of Siteplane UI Pro, and its source comes with a Pro license. Its previews are free to view and try.

Installation

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

Pro

Installs with a Siteplane UI Pro license key. Complete the one-time Pro setup first.

Get a license on the Pro page.

Usage

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

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.

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.

Scheduled reports are here

Email any dashboard to your team every Monday.

Pro

This example installs with a Siteplane UI Pro license key.

Get a license on the Pro page.

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.

Stay up to date

Get the latest product updates by email.

Pro

This example installs with a Siteplane UI Pro license key.

Get a license on the Pro page.

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.

Change your plan

Flexible plans that grow with your team.

Basic plan

$10per month

10 team members, 20 GB storage and access to all features.

Pro

This example installs with a Siteplane UI Pro license key.

Get a license on the Pro page.

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.

More space for your team

Upgrade your plan when you need more.

10 team members
Work together on projects.
20 GB storage
Space for your files.
All features
Includes reports and analytics.

Pro

This example installs with a Siteplane UI Pro license key.

Get a license on the Pro page.

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

Manage the payment method for your plan.

Visa ending in 1234

Expires 06/2028

billing@example.com

Pro

This example installs with a Siteplane UI Pro license key.

Get a license on the Pro page.

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

Invoice

Use a File Type Icon as the icon to point at a document.

Your latest invoice is available

Invoice for September 2026.

Invoice-2026-09.pdf

200 KB

Pro

This example installs with a Siteplane UI Pro license key.

Get a license on the Pro page.

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

API reference

InlineCta

Component properties
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

Component properties
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

Component properties
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

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

InlineCtaDetail

Component properties
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, and for a decision that must interrupt the task use a 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.