shadcn.io is not affiliated with official shadcn/ui
Dual Actions Split Banner Block for React Aria
A two-way fork for a component library: a tinted half with a short heading, and two ruled rows on a divider, each a whole-row link with a line about where it leads and an arrow.
Installation
Overview
A banner for React with React Aria, for the moment a visitor must choose between two equal next steps. Between the page's rails, a split on a solid divider that meets the top rule: the start half is a faint tint with "Choose a path" and one sentence; the end half is two ruled rows, "Browse blocks" and "Open the theme editor", each with a line about where it leads and a round arrow that mirrors. There are no buttons: each row is one link, stretched over the whole row with Link Overlay, so it tints on hover and rings on keyboard focus. On a phone the halves stack under a rule. It's built from Link Overlay and Guides, with your theme's tokens for every colour. For onboarding forks, persona pickers and any place two choices deserve the same weight.
FAQ
Why are the actions rows and not buttons?
Two equal choices read better as two equal rows than as a primary and a secondary button, and a whole row is a large target. Each title is a link (h3 with a Link Overlay inside) and its stretched area covers the row, so the line under it and the arrow are clickable too. A screen reader hears two headings with a link each, and the line under each title is plain text.
How do I add a third path?
Add an item to the PATHS list with a title, a line and an href. The rows share the end half's height, so a third row makes the block taller by one row (about 90 px) and the start half stretches to match. Past three, think about a list or a menu.
How does the divider reach the top rule?
The columns are the grid itself, so there's no padding on the block's column to leave a gap: the end half has lg:border-s and a Guides with marks="start" draws the + where it meets the top rule. Below lg that divider is replaced by a solid rule across the top of the rows.
Can the start half be dark?
It follows your theme on purpose: the tint is bg-muted/50, so it's a light grey in a light theme and a darker one in a dark theme. A forced black half would break the other themes and compete with the page's own hero.