shadcn.io is not affiliated with official shadcn/ui
Topic Switch Subscribe Blog Block for React
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 Base UI, 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.
Related
- Pro
Inline Subscribe Newsletter Blog
Subscribe and alertsAn end-of-post newsletter sign-up: an email field with the Subscribe button inside it, a message slot that never moves, and a confirmation that replaces the form in the same space.
- Pro
Tabbed Inbox Notification Blog
Subscribe and alertsA post-alert inbox: All and Unread tabs with counts, rows with an unread dot that clears when opened, a Mark all read button and an unread count in the header, all derived from the rows.
- Pro
Categories Blog
Topics and indexesA houseplant magazine's category index: seven cells on shared hairlines, each a link with an icon ring, a scope, the latest post, a post count and a bar for its share, derived from the list of posts.
- Pro
Tag Cloud Blog
Topics and indexesA foraging blog's tag cloud: fourteen tags in five sizes derived from their post counts, each a toggle that lists its three latest posts in a fixed-height panel beside the cloud.
- Pro
A setting callout for an uptime monitor: a card in card with a bell icon, a heading and a sentence, and an Off or On label beside a switch that rewrites the sentence and lights a status dot.
- Pro
Digest Chooser Newsletter Footer
Newsletter sign-upA newsletter footer for a developer digest: two link groups on one half of a split, and on the other a real sign-up that lets the visitor tick the digests they want, checks the address and confirms in place.