shadcn.io is not affiliated with official shadcn/ui
Dropdown Multi-Action Banner Block for Ark UI
A region prompt for a data platform: a Select of four regions with their latency beside a Shine Button Continue and a ghost Skip, with a line that says why Continue waits.
Installation
Overview
A one-question prompt for React with Ark UI, for a choice that comes down to one list and a confirm. Sablepad's card sits between the page's solid rails as a card in card, a tinted shell with a + mark on each corner around a raised panel. A globe icon, a heading and a sentence sit above one row: a Select of four regions, each with its latency, a Shine Button "Continue" and a ghost "Skip for now". Continue stays disabled until a region is picked, and the line under the row says why, then names the region new workspaces will use. Either button folds the whole block away with a CSS height transition. It's built from Guides, Select and Button with your theme's tokens for every colour. The Select is the one place this set uses a Select. For onboarding choices, regions, currencies and any prompt where one list is the whole question.
FAQ
Why is Continue disabled, and how does a screen reader know why?
There is nothing to continue with until a region is picked. The button is disabled and points at the line under the row with aria-describedby, which reads "Choose a region to continue." and then "New workspaces will be created in EU West (Ireland)." once a region is picked. That line is polite, so the change is announced, and the line is reserved at the height of its longest version so the card never moves.
Where do the regions and latency figures come from?
From the REGIONS list at the top of the file: a label, a value and a latency string. The figures are sample data, not measurements. To show real ones, measure a round trip from the visitor's browser to each region's endpoint, sort the list by it and put the fastest first. The latency shows beside each name in the list, in a bdi so it reads correctly in right-to-left layouts; the trigger shows the name alone.
How does it work with the keyboard?
Tab reaches the Select, the Continue button once it is enabled, and Skip. On the Select, Enter or the arrow keys open the list, typing jumps to a region by its first letters, Enter picks one and Escape closes the list, returning focus to the field. The exact arrow-key and typeahead details come from the library you chose.
What do Continue and Skip do?
Both fold the block away and leave focus on a visually hidden line that says what happened: "Region set to US East (Virginia)." or "Skipped. You can pick a region later in Settings." Wire submit to save the region on your server and skip to remember the dismissal in a cookie your server reads, so the card is not rendered again.