shadcn.io is not affiliated with official shadcn/ui
Push Notification Comments Block for React Aria
Three notification switches and a Previews choice beside a drawn lock screen that shows up to three cards from typed events, with a Send a test card.
Installation
Overview
Show what a comment notification looks like on a phone, with this settings panel for React with React Aria. The header names it and holds the one primary, a Shine Button that says "Send a test". The first cell has a Switch each for Replies to me, Mentions and Reactions, then a Previews choice of Always, When unlocked and Never as large radio rows. The second cell draws a greyscale phone with a fixed 09:41, the date and up to three notification cards taken from six typed events that the switches allow, newest first. Unless Previews is Always, every card says "Notification" instead of the text. Send a test draws a test card on top. The three card places are always laid out, so the phone never changes height, and a short line appears when nothing is allowed. No permission is asked and nothing is sent to a device. For comment apps, community products and any settings page that needs a picture of the result.
FAQ
How do I fill it with my own events?
Edit EVENTS (an id, a kind of reply, mention or reaction, who did it, the fixed at time and the text) in the order you want them shown, newest first, and KINDS for the switches. The cards are the first three events whose kind is switched on, so changing a switch changes the drawing at once.
What do the Previews choices do?
Always shows the sender and text. When unlocked and Never both show the app name and the word "Notification" on this locked screen, because a phone that is locked cannot show the text of the first. The hint under each choice says so.
What does Send a test do?
It draws a test card at the top of the lock screen and says nothing was sent. The block cannot ask for permission or reach a phone. To make it real, request notification permission from a user gesture, register the device with your push service, and send the test from your server.
What stays local?
The switches, the previews choice and the test card. The status line says what changed and nothing is saved. To make it real, store the three flags and the previews choice per device and respect them when the server decides whether to send.