shadcn.io is not affiliated with official shadcn/ui
Floating Bottom Pill Banner Block for Radix UI
A release pill for a knowledge base: a New badge, one sentence about semantic search, a small Try it link and a dismiss button that folds the block away.
Installation
Overview
A release pill for React with Radix UI, a message that should sit in view without blocking reading. A capsule sits in a muted shell between the page's rails: an outline "New" badge and one sentence, "Stoatlab 4.2 ships semantic search", then a small outline Shine Button link, "Try it", and a ghost dismiss button. On phones the pill wraps to a rounded card with the sentence and the dismiss button on top and the link under them. The pill rises into place once on load. Dismissing folds the whole block away with a CSS height transition, down to its top rule, and keeps the keyboard where it was. It follows your theme, and nothing in it is filled with the primary colour. It's built from Guides, Badge, Shine Button and Button.
FAQ
How do I pin it to the bottom of the screen?
The pill renders in flow so the preview, a stack of blocks and your own layout can all see it. To float it, add fixed inset-x-4 bottom-4 z-50 mx-auto to the pill (the section named "What's new in Stoatlab") and remove the block's wrapper padding (py-8 md:py-12) if the pill lives on its own. On phones it then fills the width between the insets; from sm it is centred and as wide as its content. Keep room for the home indicator with bottom-[max(1rem,env(safe-area-inset-bottom))], and make sure it never covers a cookie prompt or a chat button.
What happens when someone dismisses it?
The block's rows shrink from their full height to nothing while the pill fades, in 300 ms, and it ends at its top rule, so the next section's rule takes its place. Once folded it is inert and hidden from screen readers, and focus moves to a short visually hidden line, "Release banner dismissed.", so the next Tab carries on from the same spot. With reduced motion it closes at once.
How do I keep it dismissed after a reload?
Write a key named after the release (stoatlab:4.2-search) to a cookie in the dismiss handler and read it on the server, so the pill is never rendered for someone who closed it. Reading it in an effect would show the pill for a frame and then move the page as it folds. A new release gets a new key, so the next one shows again.
Can it dismiss itself after a few seconds?
It can, but keep the button: start a timer in an effect that sets hidden after eight to ten seconds, clear it when the component unmounts, and pause it while the pointer or focus is inside the pill. Auto-dismissal alone takes the message away from people who read slowly or use a screen reader.
Where does the link go?
Try it is a link (href="#"): point it at the feature or the release notes.
It takes asChild with the link inside, so it can be your router's link.
How does it fit on a phone?
Below sm the pill is a rounded card: the badge and sentence share the first row with the dismiss button at the end, and the link takes the full width under them. From sm it is one row and a full capsule. At 320 pixels nothing scrolls sideways, and in a right-to-left layout it mirrors.