shadcn.io is not affiliated with official shadcn/ui
Dismissible Action Banner CTA Block for Svelte
A slim survey banner between the page rails with a Shine Button and a close cell behind a solid divider: the close button opens a two-choice popover, then collapses the banner and leaves an Undo that takes focus.
Installation
Overview
A slim survey banner that asks before it goes away, for Svelte with Ark UI. Between the page rails, a one-sentence headline with a "2 min" badge and a line of copy sit at the start, a Shine Button "Take the survey" follows, and at the end a close cell behind a solid divider that meets the top rule holds the close button. The close button opens a small popover that asks "Hide this banner?" with two choices, Not now and Don't show again. Either one eases the banner shut, announces what happened to screen readers, and leaves a slim Undo row that takes keyboard focus. On a phone the Shine Button and the close button share a row under the copy. It's built from Popover, Badge, Button, Shine Button and Guides with Lucide icons, and the collapse is a CSS grid-rows transition. For in-app surveys, announcements and any banner that should be easy to dismiss and easy to get back.
FAQ
How do I remember the choice?
The block only keeps it in state, so a reload shows the banner again. Save the choice where it suits you: a cookie lets the server render the page with the banner already closed, so it never flashes; localStorage has to be read after the first render. Store "Not now" with a date and show the banner again after a week, and store "Don't show again" with no date.
How does the banner collapse, and what about reduced motion?
The banner sits in a one-row CSS grid, and the Undo row in another. Hiding it eases the row from 1fr to 0fr while the Undo row eases open, over 300 ms, so the page height barely changes and nothing is measured in script. The hidden banner becomes inert and invisible, so it leaves the tab order and the accessibility tree. With reduced motion turned on it switches at once.
Where does keyboard focus go?
Choosing in the popover closes it, and focus moves to Undo, so a keyboard user is never left on a control that has gone. Undo restores the banner and moves focus back to the close button. A hidden live region announces "Banner hidden" with the choice made, and "Survey banner restored" after Undo.
How does the popover work?
The close button is named "Dismiss the survey banner" and opens a popover that closes on Escape and when you click away.
The popover is controlled with open and onOpenChange and is not modal, and each choice sets it to closed.