shadcn.io is not affiliated with official shadcn/ui
Notification Settings Carousel Block for React Aria
Six notification channels for an alert-routing tool, one per swipeable slide, each with a Switch, a how-often select that is held while the channel is off, a last-sent date and a Send a test button, over a derived count of channels on.
Installation
Overview
Let people tune where alerts go without a long form, with this notification settings carousel for React with React Aria. Tunewell, an alert-routing tool, shows its six channels (Email, In-app, Phone push, Text message, Team chat and a Weekly digest) on one ruled track, one channel per slide. Each slide has an icon, where the channel sends, a Switch that turns it on or off, a "How often" Native Select (Instantly, Hourly digest or Daily digest, or a weekday for the digest) that is held while the channel is off and says why, a fixed "last sent" date and a "Send a test" Button. A band above the track counts the channels that are on and how many send instantly or in digests, derived from the channels, and the foot holds the status line, a dot for each channel, and Previous and Next. The controls are no-drag zones, so choosing an option never swipes the track. The ruled bands come from Guides. Tunewell and the channels are made up for the example.
FAQ
How do I use my own channels?
Edit CHANNELS. Each channel has an id, a label, a detail line (where it sends), a last ISO date, whether it is on, the options the select offers (an id and a label each) and the chosen rate. The summary band, the slide names and the dots are derived from the list. To add a channel, add an entry and a line to the Glyph component for its icon.
Why is the how-often select disabled?
A channel that is off sends nothing, so there is nothing to choose. The select is disabled while the Switch is off and the line under it says "Turn on Email to choose how often." The line keeps its place when it is empty, so the slide never changes height. The select keeps the value it had when you turn the channel on again.
Why doesn't choosing an option swipe the track?
The Switch, the select and the test button sit in boxes marked data-no-drag, and the track ignores a drag that starts in one. A drag anywhere else on the slide still swipes it.
Embla's watchDrag option returns false for a drag that starts inside a data-no-drag box, and the controls take touch-action: pan-y.
How does it work with a keyboard?
Tab reaches the Switch, the select and the test button of the channel in view, then the dots, Previous and Next. The arrow keys belong to the select, so the track is moved with the buttons and the dots. Channels that are out of view are hidden from the tab order and from screen readers, and every control is named with its channel ("Email enabled", "Send a test to Email").
What is announced when something changes?
The status line is the block's one polite live region. After a change it says what happened ("Email is on. Saved in this demo."); after the track moves it says where you are ("Channel 3 of 6"). Nothing needs a Save button, and the line says each change is saved.
What stays local in the demo?
Everything. The channels are typed example data, a change only updates this page, and "Send a test" delivers nothing. To wire it for real, load each channel's settings into CHANNELS, make setOn and setRate save the change, and make sendTest call your delivery service before it says it was sent.