Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

CTA blocks

Pro

Left Right Row CTA Block for React Aria

The baseline left-right call to action: a split between solid rails with a headline and one line at the start and, past a divider, a tinted cell at the end that holds the Shine Button over an outline action.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A plain call to action for React with React Aria, for a docs platform called Orchard. Between the page rails, a headline ("Ready for enterprise?") and two lines of supporting copy sit at the start. A solid divider that meets the top rule sets off a tinted cell at the end, where the Shine Button "Contact sales" stacks over an outline "See pricing", both as wide as the cell. It's kept deliberately plain, the baseline of the left-right family, built from Guides, Shine Button and Button with a one-time CSS fade-up and your theme's tokens, so it's light on a light page and dark on a dark one. Use it to close a pricing section, as a contact-sales band, or between sections where a full centred call to action would be too heavy.

FAQ

How long can the headline and the line be?

Keep the headline to a few words and the line to a sentence or two: the text column takes the space the end cell leaves and wraps inside it, so longer copy wraps on to more lines instead of overflowing. The end cell has a fixed width of 20rem on wide screens.

Does it follow my light and dark theme?

Yes. It uses no dark class: the end cell is a muted tint of the page, the divider and the rails are your border colour, so it is light in a light theme and dark in a dark one. The headline, the muted line and both buttons are measured against the page in every preset.

Can I keep only one action?

Yes: delete the outline Button. The Shine Button keeps its place in the cell. Keep the label specific, such as Contact sales rather than Learn more.

How does it fit on a phone?

Below md the text sits above the cell, which spans the width with a hairline between, and the buttons stack full width. It reads down to a 320 px screen.

Does it animate?

The text fades up once when the page loads, with a CSS transition, and the Shine Button's light sweeps across it on hover or focus. With reduced motion the text simply appears and the light fades in where it stands. There is no script and no loop.

All 100 cta blocks