shadcn.io is not affiliated with official shadcn/ui
Notification Preferences Storefront Block for React Aria
An email preference centre for a shop: a matrix of switches for four topics by email, text and push, a frequency select for each topic, a pause-all switch and a drawn digest that counts the emails a month.
Installation
Overview
Let subscribers choose what a shop sends, with this preference centre for React with React Aria. A header names the shop. In a hairline frame with a plus mark on each corner, the first band holds a Pause all for 30 days Switch that names the date it ends and greys the matrix with a text swap. Below, a table of Switches has four topics (New arrivals, Restocks, Sales, Journal) down and email, text and push across, with a frequency Native Select for each topic's email; text is not offered for the Journal. The side cell is a drawn digest that lists only the sections you chose by email, with the monthly counts worked out from the frequencies. Save preferences is the one Shine Button and is inert until something changes; Discard restores the saved choices. On a phone each topic is one row with three labelled chips and its frequency. Built from Switch, Toggle, Native Select, Shine Button and Guides.
FAQ
How is the emails a month figure worked out?
Each frequency option has a typed perMonth. The figure is the sum for topics with email on and not paused, and the texts and pushes use a typed rate per topic. It says About because these are typical counts, not a schedule.
What does Pause all do?
It disables every switch and chip, swaps each topic's hint for Paused until 8 Nov (30 days from the typed AS_OF) and sets the counts to none. Your choices underneath are kept and come back when you turn it off.
How do Save and Discard work?
They count the cells, frequencies and the pause that differ from the saved state. Save stays inert, with a spoken answer, until something changed, then copies the draft into the saved state and says Saved in this demo. Discard puts the saved state back.
What stays local, and how do I wire it?
Everything: no email, text or push is sent or stopped. To wire it, post the topic, channel and frequency choices to your email provider's preferences API and set the pause end date server-side.