shadcn.io is not affiliated with official shadcn/ui
Fan Club Music Block for Radix UI
Three fan-club tiers from $3 to $15 a month as one radio group, a perk matrix with the chosen tier tinted, and six pieces of exclusive content that unlock or lock as you choose, counted in the heading, with a Join button.
Installation
Overview
Show fans what a membership opens before they pay for it, with this fan club for React with Radix UI. It draws Marlow Quay's club on Stanza Club in a hairline frame with a plus mark on each corner, in three bands. The first is three tier cells, Front row at $3 a month, Backstage at $8 and All access at $15, each with its member count, which work as one radio group. The second is the perk matrix: perks as rows, tiers as columns, "Included" or "Not included" as a glyph and a word, with the chosen tier's column tinted; on a phone it becomes one list for the chosen tier. The third is six pieces of exclusive content, each unlocked or locked by the tier you chose ("Unlocked" or "Needs Backstage", with a lock glyph, locked rows muted but still readable), and its heading counts them: "4 of 6 unlocked at Backstage". Join is the one Shine Button and says nothing was charged. It's built from native radio cells, a real table, Guides and Shine Button. For fan clubs, creator memberships and any tiers that unlock content.
FAQ
How do I load my own tiers and content?
Edit TIERS (id, name, price in whole cents, member count), PERKS and PIECES. Each perk and each piece has from, the lowest tier that includes it, as a position in TIERS, so a tier unlocks everything at or below its own position. The matrix, the unlocked count in the heading and every "Needs" label are worked out from those numbers.
How is the unlocked count worked out?
It counts the pieces whose from is at or below the chosen tier and writes it with the tier's name: Front row opens 2 of 6, Backstage 4 of 6 and All access 6 of 6. The same count updates the status line when you choose a tier, so a screen reader hears it.
What do Join and Switch do?
Join records the tier in the page and says "Joined Backstage in this demo. Nothing was charged." Once you have joined, the button reads "Joined Backstage" for that tier, and choosing another tier turns it into "Switch to All access, $15 a month". Nothing is saved and no card is taken.
Why can I still read the locked rows?
A locked row says what it is and what unlocks it, because a fan deciding whether to join needs to know. It is muted, with a lock glyph and the words "Needs Backstage", and it never relies on colour alone. In your app, link a locked row to the tier and keep the actual file out of the page until the member signs in.