Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Banner blocks

Pro

Location Consent Alert Banner Block for React Aria

A region callout for a storefront: two cells split by a divider, a map pin and a live line at the start, and a US, EU and UK segment control at the end that rewrites the currency, tax and delivery line.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A region callout for React with React Aria, for a shop that prices by where the visitor is. A band of two cells, split by a solid divider that meets the page's top rule: at the start a map pin, a short heading and one live line; at the end a segment control with three regions (US, EU, UK). Choosing a region rewrites the line in place with that region's currency, tax and delivery window, in a cell that keeps its height, and the choice stays while the page is open. On phones the cells stack under a rule and the control spans the width. The pin carries the info token; the text and the control follow your theme. The page's rails and top rule come from the Guides spine. It's built from Guides and Segment Group, with your theme's tokens for every colour. For regional pricing, shipping and tax notices, language and currency prompts.

FAQ

Does a screen reader hear the line change?

Yes. The line is a polite live region that is in the page from the start, so choosing a region announces the new sentence once and nothing is read at load. The sentence names the region first ("Europe: prices in EUR…") because the segments themselves are only "US", "EU" and "UK".

How do I add a region or change a line?

Edit REGIONS at the top of the file: each region is a code, the label on its segment and the line it shows. The control and the live line follow the data. Keep each line to about one sentence: the cell reserves two lines on phones and one from sm, so a longer sentence would move the page when you switch.

What does choosing a region actually change?

Only the line, in this block: it is the control and the message. To change real prices, read the selected code where you format money and compute tax, and store it for the next visit (a cookie that your server reads, so the first paint is already right). The block doesn't read the visitor's location or ask for permission.

Why a segment control and not a select?

Three short choices are better seen than hidden, and one tap does it. A segment control also keeps the current region visible all the time. For more than about four regions use a select instead: the segments won't fit a phone.

How is the control used with a keyboard?

It is a group of radio buttons named "Region": Tab reaches it, the arrow keys move between regions and choose one, and the chosen segment has a visible highlight. Nothing shifts when you switch, because the line's cell keeps its height.

How does it fit on a phone?

Below lg the pin, heading and line come first, then a rule, then the control at the full width of the page column. At 320 pixels nothing scrolls sideways, and in a right-to-left layout the cells and the pin mirror.

All 100 banner blocks