shadcn.io is not affiliated with official shadcn/ui
Opt Out Confirmed Success Block for Ark UI
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 Ark 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.