shadcn.io is not affiliated with official shadcn/ui
Membership Storefront Block for React Aria
A paid club for a delicatessen: Free, Plus and Family plans as three cells with a Pay yearly switch, a yearly-spend field, and the working that shows what the plan saves and where it breaks even.
Installation
Overview
Tell a shopper whether a membership pays for itself, with this club page for React with React Aria. A header names the club and says what Fennel & Fig is. A hairline frame with a plus mark on each corner holds a Switch, Pay yearly, and three plan cells that share hairlines and are also a radio group: Free, Plus and Family, each with its price, three perks and a line for what paying yearly saves. A field takes what you spend in a year in whole dollars and refuses anything else with the reason; under it a list works it out in whole cents: what the plan costs, what it takes off prices, the delivery fee it saves on a typical basket and the net. A line says the spend at which the plan has paid for itself and how far over or short you are. The Shine Button joins the chosen plan. It's built from Switch, Field, Input, Shine Button and Guides, with a CSS entrance only. For a subscription club, a shop membership or a delivery pass.
FAQ
How is the break-even worked out?
Each plan takes a percentage off every order and waives a $6 delivery fee. A typical basket is $45, so a dollar of spend saves the discount plus 6 / 45 of a dollar in delivery. The break-even spend is the yearly cost divided by that rate, rounded up to a whole cent. All of it is integer cents.
How do I change the plans?
Edit PLANS (a monthly price and a yearly price in cents, the percent off and three perks) and the constants DELIVERY and BASKET. Paying yearly shows the yearly price; paying monthly shows the monthly price and the cost of twelve of them.
What does the Free plan show?
No fee to earn back, so the working shows zeros and the line says so. The button reads Stay on Free and only answers in the status line.
What stays local, and how do I wire it to real billing?
Choosing a plan and joining are local: nothing is charged and no account changes. To wire it, post the chosen plan and period from join to your billing provider's checkout, and replace the typed spend with the shopper's average yearly order total.