shadcn.io is not affiliated with official shadcn/ui
Split Panel Address Bar CTA Block for React Aria
A reverse split CTA built around an editable address bar in a browser frame: type a name, see whether it is available and watch the page mirror it before you claim it with a Shine Button.
Installation
Overview
A reverse split call to action that lets visitors try a name before they commit to it, for React with React Aria, here for Harbor, a fictional site builder. The browser sits at the start in a hairline frame with + marks on its corners: a tab, then an address bar whose middle is a real input between "https://" and the domain. Whatever is typed updates the tab title and a miniature page below, and under the frame a line says whether the address is available. When it is, the Shine Button "Claim this address" becomes a link; when it isn't, it is disabled. At the end, behind a split divider, sit a badge, the headline, a sentence and three points. The copy comes first in the page. It's built from Frame, Field, Input Group, Status, Badge, Guides and Shine Button, with Lucide icons, Tailwind CSS and a CSS entrance that stays still under reduced motion. Made for site builders, link-in-bio tools and any product that hands out a name.
FAQ
Where does the availability come from?
From a short list: TAKEN at the top of the file holds the names that count as taken, and verdictFor compares the typed name with it, so the answer is instant and nothing is sent anywhere. In a real product, replace the lookup with a request to your server, show the line "Checking…" while it runs and debounce it as the visitor types, and still check again when they claim, because someone else may take the name in between.
Which names are accepted?
Lower-case letters, digits and hyphens, from 3 to 24 characters, with no hyphen at either end. The field cleans what is typed or pasted as it arrives, so capitals and spaces never show up in the bar; the rules are MIN_LENGTH, MAX_LENGTH and the clean function, and the line under the window explains any name that falls short.
Is the address bar accessible?
The input is a real text field with a hidden label ("Your address, without harbor.site"), described by the status line, which is a polite live region, so each result is read when it changes. The tab strip and the miniature page are decorative: they are hidden from assistive technology and can't take focus. The "https://" and domain text beside the input is part of the field's look, and the label says the domain is not part of what is typed.
What does the claim button do?
Nothing but link: it's a Shine Button link with href="#" that you point at your sign-up page, ideally with the chosen name in the query string. It is a link only when the name is available; otherwise it is a disabled button, and the line above it says why. To reserve the name before sign-up, call your API from a click handler and keep the same two states.
How does it fit on a phone?
Below the large breakpoint the panels stack, copy first. To keep the Shine Button on the first screen, the three points and the miniature page are shown from the sm breakpoint up: a phone keeps the tab and the address bar, the availability line and the button. The "https://" text is hidden below sm so the field keeps its width, and long names truncate in the tab instead of overflowing.