shadcn.io is not affiliated with official shadcn/ui
Notification Permissions Onboarding Block for Ark UI
A reminders app's notification choice: six pressable chips (security alerts locked on) and a drawn phone lock screen that rebuilds with the choice, with a clock, a date and up to four notification cards and a +N more line.
Installation
Overview
Let people see what they are signing up for with this notification choice for React with Ark UI. It is a panel of Chimewick, a deadline-reminders app: six Toggle Group chips (Mentions, Replies, Deadlines, Weekly digest, Product news and Security alerts, which is locked on and reads Always on) and a drawn phone lock screen that rebuilds as you choose. It shows a clock, a date and a card per chosen type, each a lettermark, a title, one line and how long ago, at most four with “+2 more” past that. From a wide screen the phone sits at the start; in the page the chips come first, so the choice is reached before the picture. Save is the one Shine Button and stays quiet until something changed. It asks the browser for nothing.
FAQ
Does this ask for notification permission?
No. It is a picture of a choice, and nothing is requested from the browser or the phone. In your app ask for the system permission only after the person has chosen here, from save, with the browser's Notification.requestPermission() or your push service's own call, and show the lock screen's cards from the types you actually enabled.
Why can't I turn Security alerts off?
They tell you about new sign-ins and password changes, so the block keeps them on: the chip is disabled, reads Always on, and withLocked puts it back if a change would remove it. Mark other types locked: true in KINDS the same way.
How is the lock screen built?
From KINDS, in the order they are listed: the chosen ones are filtered, the first four become cards and the rest become “+N more”. The phone has one fixed height, so choosing never moves the panel. The time and date are fixed text. It is hidden from assistive technology, and the line under it says how many notifications it shows.
What stays local in the demo, and how do I wire it?
Everything. Save says it kept the choice in this demo and sends nothing. In your app write the chosen ids to your server in save, and send only those types from your notification service.