shadcn.io is not affiliated with official shadcn/ui
Push Permission Prompt Notification Block for Svelte
A news app's push permission ask drawn in a browser window: a soft card on the page, a drawn browser prompt with Allow and Block, and the three outcomes, with a line that says nothing is asked of your real browser.
Installation
Overview
Ask for push notifications the polite way, with this permission prompt for Svelte with Ark UI. A compact header sits over a hairline frame holding a drawn browser window: a tab strip, an address bar with the site's name and a news page in greys. On the page a card asks first, "Get breaking stories on this device", with three reasons, a Shine Button to turn notifications on and a ghost Button for Not now. Pressing the first hangs a drawn browser prompt from the address bar with Allow and Block. Allow ends in "Notifications are on" with Turn off; Block ends in "Blocked in your browser settings" with the steps to undo it behind a disclosure; Not now leaves a quiet card with a way back; Start over resets. The prompt is drawn: a line under the window says nothing is asked of your real browser, and shows what it holds. It's built from Shine Button, Button and Guides, with CSS motion only. For any site that wants push notifications and would rather ask in its own words first.
FAQ
Does it ask my browser for permission?
No. The prompt is a drawing with real buttons: pressing Allow or Block only changes this page. The block never calls Notification.requestPermission() or any other permission API, and sends nothing. The one thing it reads is Notification.permission, once after the page loads, so the line under the window can show what your browser actually holds ("Your browser says: default"); that read never asks.
How do I connect the real prompt?
Call Notification.requestPermission() from the click of the soft ask's primary button, and show the drawn bubble only in the docs. A browser lets a page ask only in answer to a press, and shows its own prompt, whose look you can't change, so the soft ask is where your words go. Keep the outcomes: a granted answer turns on your push subscription, and a blocked one can't be asked again from the page, which is why the card then shows the steps to undo it.
What do the three outcomes say?
Allowed says notifications are on and offers Turn off. Blocked says it was blocked in the browser settings and that the page can't ask again, with a disclosure of three steps: open the site settings from the lock in the address bar, set Notifications to Allow, reload. Not now closes the ask without asking the browser, and its card offers Turn on after all. Each message is also said by the status line under the window.
How does it work from the keyboard?
Pressing Turn on notifications moves focus to Allow in the drawn prompt; Escape closes the prompt, as a browser's does, and returns focus to the button with nothing decided. Allow lands focus on Turn off, Block on the undo disclosure, and Start over returns it to the soft ask. While the prompt is open the primary button stays in place, quiet, and pressing it takes you back to the prompt.