shadcn.io is not affiliated with official shadcn/ui
Chat Notification Settings Block for Radix UI
A settings panel for a team chat app: one default (all messages, mentions only, nothing), five conversations that follow it or override it with a timed mute that shows when it ends, and a live preview of how many of today's six messages would reach you.
Installation
Overview
Set how loud a chat app is, then see what that means, with this chat notification settings panel for React with Radix UI. A hairline frame with a plus mark on each corner holds the panel for Tonepad, a team chat app. Band one is your default for every conversation as three radio cards: All messages, Mentions only or Nothing. Band two lists five conversations that either follow the default ("Following your default: Mentions only") or carry their own setting from a Native Select, including Mute 1 hour, Mute 8 hours and Mute until I turn it on; a timed mute shows when it ends ("Muted until Mon 12 Oct, 17:41", worked out from a fixed morning) and each row has a Reset button. Band three previews six of today's messages, each marked "You'd get this" or "Silent" by those rules, with the count. The action foot counts unsaved changes, and its Shine Button is the only colored control. It's built from Native Select, Button, Shine Button and Guides, with a CSS entrance only. For chat apps, community tools and any product where people mute some rooms and not others.
FAQ
What stays in the page, and how do I make it real?
Everything. The settings, the five conversations and the six messages are typed in this file, Save keeps the choices in the page, and no notification is ever shown or sent. To wire it for real, post the default and the per-conversation overrides (with a mute end time) to your settings endpoint on Save and load them into the same state; the preview keeps working from the same rule.
How is the preview worked out?
By one small rule: a conversation that follows the default uses it, one with its own setting uses that, and a mute counts as Nothing. Under All messages every message counts, under Mentions only just the ones that name you, under Nothing none. The count and the rows change the moment you change a setting, before you save.
How is the mute end time worked out?
From a fixed "now" of Monday 12 October at 09:41, not the clock: one hour ends at 10:41 and eight hours at 17:41, written in English. In your app, compute it from the real time and the reader's time zone.
Is it usable with a keyboard and a screen reader?
The default cards are real radio buttons in a group and arrow keys move between them, each conversation's select is named with the conversation, Reset names the conversation it resets, and the foot's status line announces unsaved counts and results. Muted and silent states are written as words, never only as an icon.