shadcn.io is not affiliated with official shadcn/ui
Dual Action CTA Block for React Aria
A 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.
Installation
Overview
A call to action with one split button, for React with React Aria. The column itself is the band: a one-line headline and a sentence with a bold lead on the start side, a solid divider that meets the top rule, and on the end side a joined pair of buttons, a Shine Button "Get started" link and an attached chevron that opens a menu of the other ways in (the cloud, self-hosted, a call with the team). Below md the two parts stack and the divider disappears. The visitor who just wants to start has one obvious button; the one who needs another route finds it without a second row of buttons. It's built from Shine Button, Button Group, Dropdown Menu and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For developer tools, platforms and products with more than one way to get started.
FAQ
How does the split button work?
The two buttons sit in a Button Group, which squares their touching corners and joins them with a thin divider. The first one is a link to your main route. The chevron is the trigger of a menu: it opens with a click, Enter, Space or the Down arrow, lists the other routes, and closes with Escape or a click elsewhere, returning focus to the chevron. The chevron has its own name, "More ways to get started", so a screen reader never meets an unlabelled button. Both halves are Shine Buttons, so the light sweeps each of them when it's hovered or focused.
How do I change the routes and where they go?
Edit ROUTES at the top of the file: each entry has a label, an icon and an href, and the menu is built from the list, so adding or removing a route is one line. Every item is a real link that opens on Enter or a click and is reachable with the arrow keys; point them at your sign-up, install docs and contact pages.
Each item renders a link when it has an href.
How are the lines drawn?
The spine is a Guides with the top rule and plus marks. The divider is the end cell's start border, and a second Guides puts a plus mark where it meets the top rule. Both are solid hairlines. Below md the divider and its mark are hidden, because the parts stack.
Does the menu follow the theme too?
Yes. Neither the block nor the menu forces a scheme. A menu opens in a portal outside the block, so it takes its colours from the page's theme, and it's light on a light page and dark on a dark one.
How does it fit on a phone?
The headline steps down from text-5xl to text-3xl, the split button sits under the text and is only as wide as its two parts, so it stays on one line down to 320 px, well inside the first screen. The menu is as wide as its longest label, opens below the chevron and moves to stay inside the screen. In a right-to-left layout the chevron sits on the opposite side of the main link, and the menu opens from that side.
When should I use a split button instead of two buttons?
Use it when one route is right for most visitors and the others are exceptions: the main button keeps all the attention and the alternatives stay one click away. When two actions are equals, such as a trial and a demo, two buttons side by side, like in Dark Icon Accent, read more honestly.