Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Notification blocks

Pro

Push Permission Prompt Notification Block for React

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Ask for push notifications the polite way, with this permission prompt for React with Base 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.

What stays local?

Everything: the card's state, the prompt and its outcomes live in the page and nothing is stored, so a reload starts again. The drawn browser is aria-hidden apart from the card and the prompt, which are real controls.

How does it look on a phone?

The browser window takes the width of the page with one tab and a shorter masthead; the card and the prompt use its width minus a margin, and the three outcomes share one fixed-height cell so the window never changes size.

  • Pro

    Permission Request Notification

    Asks and consent

    A travel journal's permission list: camera, location and microphone, each with what it is for, a state badge, a segmented Allow, Allow once or Deny, a line on what the choice means, Allow all requested and Reset.

  • Pro

    Notification Permission Dialog

    An uptime monitor's status page with a dialog shown open that asks before the browser does: three switches with an example each, a live preview of drawn notification cards, a not-now path and a Don't ask again box, and no browser prompt.

  • Pro

    Notification Denied Error

    Browser and device

    A panel for blocked push notifications: two channel cells, Push (its state and the one-line fix, read from the browser) and Email instead, plus what the digest brings.

  • Pro

    Mobile Push Settings

    Notifications

    A push settings panel that leads with a 24-hour strip of quiet hours, a critical-alerts switch, and per-device Push, Sound and Badge toggles with a save bar that counts unsaved changes.

  • Pro

    Cookie Consent Notification

    Asks and consent

    A news site's corner cookie card: Reject all and Accept all as equal buttons, a Customize that opens a switch for each optional kind with the cookies it sets, and a one-line receipt you can change.

  • Pro

    Feedback Request Notification

    Asks and consent

    A writing app's feedback card drawn over its drafts page: five stars, a question that follows the rating, a thank-you that stays on the page, and a memory in the tab so it asks once and Ask again brings it back.

All 100 notification blocks