shadcn.io is not affiliated with official shadcn/ui
Notification Settings Music Block for Radix UI
Alert settings for a music app: seven alert types in three groups with switches, six followed artists each with an All, Releases only or Off control and a count, and quiet hours with two time selects and the hours a day they mute.
Installation
Overview
Let listeners choose what a music app tells them, artist by artist, with these alert settings for React with Radix UI. It shows Softping, a music app's alerts, in a hairline frame with three bands and a foot. The first lists seven alert types under Music (New releases, Playlist updates, Downloads finished), Live (Concert alerts near you, On-sale reminders) and Social (Friend activity, Weekly digest), each a row with a Switch and a count of how many are on. The second lists six followed artists, each with a three-state Segment Group, All, Releases only or Off, and the count "Alerts for 4 of 6 artists". The third sets quiet hours with a switch and two Native Selects, and works out the hours a day they mute. The foot counts unsaved changes and has a Shine Button to save them and a Button to discard them. On a phone the three-state control drops under the artist's name. It's built from Switch, Segment Group, Native Select, Field, Button and Guides, with a CSS entrance only. For music, podcast and event apps.
FAQ
How do I use my own alerts and artists?
Edit ALERTS (an id, a group, a title and a hint) and ARTISTS (an id, a name and a kind). The group headings, their counts and the "4 of 6 artists" line are worked out from the lists and the saved state, so adding a row needs no other change. The modes are all, releases and off.
How are quiet hours counted?
From the start hour to the end hour, wrapping past midnight: 22:00 to 08:00 is 10 hours a day. If the two times are the same there is nothing to mute, so Save refuses, says why in the status line and moves focus to the end time. Turning the switch off disables the selects and the line says alerts arrive around the clock.
How do Save and Discard behave?
Both are always there. The status line counts unsaved changes ("3 changes not saved yet."), Save keeps them in the page and says so, and Discard puts the saved state back. With nothing changed they answer "No changes to save." instead of doing nothing silently.
Is anything sent, and how do I make it real?
No. The settings live in the page's state and no alert is sent. To make it real, post the saved object to your account API, and check the quiet hours and each artist's mode on the server before sending a push or an email.