shadcn.io is not affiliated with official shadcn/ui
Left Right Row CTA Block for React
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.
Installation
Overview
A plain call to action for React with Base UI, 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.
Where do the links go?
Both are links (href="#"): point See pricing at your plans and Contact sales at your sales form, a booking page or a chat opener.
Each button renders the link it's given with render, with nativeButton={false}.
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.
Related
- Pro
Left Right CTA with Eyebrow Pill
Card in cardA card-in-card call to action that follows your theme: a headline with a quiet outline pill that links to a customer story, one sentence, and the Shine Button with an outline action at the end.
- Pro
Compact Left Right CTA
Prices and offersA slim renewal band between solid rails with a Shine Button and an outline link on the end side, and a closing band of three cells that sets the two prices and the saving side by side.
- Pro
Left Right CTA with Live Status Pill
Trust and securityA band call to action between solid rails: a headline, a sentence and a pulsing status pill that opens a popover of four services, with the Shine Button and an outline action at the end.
- Pro
Left Right CTA with Compliance Badges
Trust and securityA split call to action between solid rails: the pitch, a Shine Button and an outline link at the start, and four certification cells on shared hairlines at the end whose marks are stamped on one after another.
- Pro
Dual Action CTA
Slim bandsA band call to action between solid rails with one split button: a Shine Button Get started link joined to a chevron that opens a menu of other routes, beside a headline and a sentence, in your theme.
- Pro
Left Right CTA with Progress Ring Tracker
Lists and stepsA band call to action between solid rails: a headline, a sentence and the Shine Button at the start, and at the end a framed figure with a progress ring drawn in three arcs, one per setup step, with the steps listed beside it.