shadcn.io is not affiliated with official shadcn/ui
Opt Out Confirmed Success Block for React
A full-height confirmation after an unsubscribe: four channels each with a named switch (Marketing email off, Product updates on, Push on, SMS off), where turning Marketing email back on is the resubscribe, said in a live line with an Undo.
Installation
Overview
Make an unsubscribe easy to take back, with this opt out confirmed page for React with Base UI. It is the Equinox Letter screen after someone left the marketing email, a whole screen with the page's rails and one band across it, in a narrow centred column. A check in a muted tile, the heading and one sentence come first, then a corner-marked list of four channels, each with a Switch named for it: Marketing email off, Product updates on, Push on, SMS off. Turning Marketing email back on is the resubscribe, and every change is said once in a live line that carries an Undo. The one primary is the Shine Button Manage all preferences, pinned to the foot of a phone's screen. For newsletter, email and consent pages.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was changed. The four channels and their starting states are typed constants kept in this page's state. To wire it, send each switch change to your preference API, wait for its answer, and only then write the result in the live line; a one-click unsubscribe should also honour the link in the email header. Manage all preferences should point at your preference centre.
How does Undo work?
It reverses the last change only, whichever channel it was, and says so in the live line. It stays until the next change. Its space is always reserved, so the line never moves when it appears.
What does turning Marketing email back on do?
Here, it flips the switch and says "Resubscribed to Marketing email. Nothing was sent." In a real product it should send a confirmation email before it starts mailing again, because a switch can be pressed by accident.
Related
- Pro
Email Preferences Settings
NotificationsA preference-centre page, the one an email footer links to: five topics each with a switch and a frequency menu, a digest mode, a computed email volume and an unsubscribe-from-everything that locks the rows and turns Save into Resubscribe.
- Pro
Notification Channels Settings
Alerts and auditA destinations window for alerts: a rail of Slack, email, PagerDuty, webhook and SMS destinations with a status word, beside the chosen one's routing by severity, a pause switch and a simulated test.
- Pro
Settings Version Sheet Success
Saves and updatesA thermostat settings page with the sheet that says what a save changed, shown open: three settings from old value to new, the version and its time, a Done button and a Revert to version 13 that redraws the page.
- Pro
Account Deletion Grace Period Success
Account lifecycleA confirmation page for a scheduled account deletion: what was switched off, a 30-day bar cut at day 14 into a restore zone and a removal zone, a Cancel deletion button that flips the page in place and a data download.
- Pro
Cancellation Runway Success
Plans and limitsA confirmation page for a cancelled subscription: a ring counting the days of paid access still ahead, the day access ends, the reason given quoted back, and a Reactivate button that turns the page in place.
- Pro
Signed Out Devices Success
Security and accessA confirmation panel for signing out every other session: a row of marks for how many sessions remain, the four devices with a state each and a ghost Sign out here too that signs this device out on the page.