shadcn.io is not affiliated with official shadcn/ui
Full-Bleed Border Accent Banner Block for Radix UI
A platform-update band for a code review tool: a tinted strip whose start edge carries a 2 px bar, with a Platform update chip, one sentence and a link to the release notes.
Installation
Overview
A full-bleed update banner for React with Radix UI. A faint tint of the theme's muted colour runs across the whole width of the page. Inside the page column, a 2-pixel bar in the foreground colour marks the start edge of the message, and the message reads from there, aligned to the start rather than centred: a "Platform update" chip, one sentence in the muted tone (Copperstack's reviews now group comments by file) and an underlined link to the release notes with an arrow that turns around in right-to-left layouts. The bar is a start border, so it sits at the left in English and at the right in Arabic or Hebrew with no extra code. The strip is 44 pixels tall on a desktop and wraps to two lines on a phone with the bar staying full height. It sits on the page's drafting lines: the rails and a top rule with plus marks. It follows the theme, with no black panel and no primary colour. Built from Guides and Badge. For platform updates, changelog pointers and notices that should look deliberate without shouting.
FAQ
How do I change what the band says?
Edit UPDATE at the top of the file: the chip (chip), the sentence (news), the link's words (link) and its destination (href). The chip, the sentence and the link flow as one piece of text, so on a 320-pixel phone they wrap onto a second line rather than overflowing; keep the sentence to about 35 characters so two lines are enough.
How do I change the accent bar?
It is border-s-2 border-foreground on the box that holds the text. Make it border-s-4 for a heavier bar, or swap border-foreground for another theme token such as border-info. It's a start border, so it follows the reading direction, and because the padding is inside that box the bar runs the strip's full height at every width.
How is it different from the Top Bar Banner?
The top bar is centred, one line of text with a dismiss button. This one is start-aligned, has a chip and no button, and its emphasis is the structural bar along the start edge. Both use the same tint, the same height and the same drafting lines, so they stack and swap without a visible seam.
Does it follow my theme?
Yes. The tint is bg-muted/50, the bar and the link use the foreground colour and the chip is an outline Badge, so every colour is a token and it reads the same in light and dark. There's no bg-foreground panel.
How does it line up with my navbar and hero?
The tint is on the full-width section; the message sits in the same max-w-6xl page column as every block. The Guides layer draws the rails and one rule along the top with a plus on each crossing, and no bottom rule: the block below draws that line, so a stack never doubles it.