shadcn.io is not affiliated with official shadcn/ui
Topic Switch Subscribe Blog Block for React Aria
Topic subscriptions as six Switch rows with a line and posts per month each, a live summary that counts the topics and posts, and a Save preferences button with an honest confirmation.
Installation
Overview
A subscription preferences block for React with React Aria, written for Ridgeling, a hiking blog. In a split behind a divider, the end holds six topics as rows rail to rail: the name, a line about it, how many posts it brings a month and a Switch to follow it. The start holds the header and, pinned to the foot at a T with the divider, a live summary ("Following 3 topics, about 7 posts a month", worked out from the switches) and a Shine Button "Save preferences". On a phone the rows come right after the header and the summary follows them. It is built from Switch, Shine Button and Guides. For a blog that lets readers choose what reaches their inbox. Saving changes nothing outside the page, and the line under the button says so.
FAQ
How is the summary worked out?
From the data, not typed: the topics you follow are counted, and their perMonth values are added up. It is a polite live line, so a screen reader hears the new total when a switch moves, and it handles none ("Following no topics: nothing will arrive") and one topic.
What does Save preferences do?
It shows "Saved in this demo only: nothing is sent and nothing is stored" in a status line that is always in the page, and the line clears as soon as you move a switch, so it never claims a saved state that has changed. Wire the button to your own endpoint to store the list of followed topic ids.
How do I change the topics?
Edit TOPICS: an id, a name, a line and perMonth. Add or remove rows and the summary follows. FOLLOWED lists the ids that are on when the block loads.
How is each Switch named?
Each has an aria-label of "Follow" and the topic name, so a screen reader reads the choice, and the topic name is also a heading above its line. Space toggles the focused switch.