shadcn.io is not affiliated with official shadcn/ui
Minimalist Text Banner Block for React
A plain policy notice for a payroll service: one centred paragraph and one underlined link between the page rails, with no tint, icon, button or dismiss.
Installation
Overview
A minimalist text banner for React with Base UI: the least decorated block in the set. One centred paragraph says what changed (Glenloop updated its privacy policy to cover payroll log retention) in the muted tone, and ends with one underlined inline link, "Read the changes", in the foreground colour. There is no tint, no icon, no button and no dismiss: type and whitespace are the whole design. The paragraph balances its own line breaks, so on a phone it wraps to two lines without leaving a single word on the last one. The block sits on the page's drafting lines, the rails of the page column and a rule along its top edge with a plus on each crossing, and follows the theme in light and dark. Built from Guides alone. For policy updates, terms changes and any notice a visitor should be able to find but shouldn't have to dismiss.
FAQ
How do I change the notice?
Edit NOTICE at the top of the file: the sentence (text), the link's words (link) and its destination (href). It is plain markup in one paragraph, so you can replace the sentence freely; keep the link text specific ("Read the changes", not "Learn more"). The sentence is in a bdi, so its punctuation stays in place in a right-to-left page.
Why doesn't it say when the policy changed?
A date in a banner goes stale once the banner is left up. The sentence says what changed and the link takes visitors to the policy, where the date belongs. If you want one, add it to the sentence and remember to remove the banner when the notice period ends.
How is it different from the Top Bar Banner?
The Top Bar Banner is tinted, has a dismiss button and a short, news-style line. This one has no tint and no button and carries a longer sentence that wraps. It is the right choice for something a visitor should be able to see and read at leisure, such as a legal notice, rather than something to close.
Can visitors dismiss it?
Not in this block. When you want a dismiss, copy the fold from the Top Bar Banner: a ghost icon button, a grid row from 1fr to 0fr, and focus moving on to what follows the banner.
How does it line up with my navbar and hero?
The section is full width and the paragraph 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. It's labelled "Privacy policy update" so it's a named region for screen readers.
Related
- Pro
Top Bar Banner
Top barsA slim announcement strip for a writing app's release: one centred line with the version, the news and an underlined link, and a ghost button that folds the strip away.
- 3Pro
An unread-messages bar for a team messaging app: a dot, a rolling count, a link to the inbox and a Mark all read button that rolls the count to zero.
- Pro
Social Links Banner
Top barsA one-line follow strip for an indie game studio: a real list of five plain links separated by dots drawn in CSS, with a quiet arrow that appears on hover and focus.
- Pro
Command Hint Banner
Top barsA one-line shortcut hint for a docs app: key caps drawn inline that read Command K on a Mac and Ctrl K everywhere else, and an underlined link to all shortcuts.
- Pro
Full-Bleed Inverted Banner
Top barsA maintenance notice for a hosting provider: a stronger tinted strip with a centred line in full foreground weight, a status dot and a link to the status page.
- Pro
A launch band for a design tool: a tinted strip with a centred line, a Launch week chip whose outline a light sweeps three times, and a link to the keynote.