shadcn.io is not affiliated with official shadcn/ui
Two Plans Pricing Block for Svelte
A free Personal plan beside the recommended Team plan as two cards in cards, with the monthly and annual switch in the header row and Team's price rolling to its annual amount.
Installation
Overview
Present a free tier and a paid upgrade side by side with this two plans pricing section, shown here for Sidenote, a website feedback tool. A header row has the headline and one sentence on one side and a monthly and annual Segment Group on the other, over two plans, each a card in a card: a free Personal plan and a Team plan whose raised panel has a shadow, an outline Best value Badge beside its name and the only filled Shine Button. Team's price rolls from $16 to $13 with Sliding Number when the billing period changes, and the line under it says how it's billed. The plans sit between the page's side rails drawn by Guides, with + marks on the corners of the area that holds them. The button is on the first screen on a laptop, and on a phone Team comes first and its seven features collapse after five behind an "All 7 features" button. Built with Badge, Frame, Guides, Segment Group, Shine Button, Sliding Number and Lucide icons, with CSS transitions only. For freemium products, developer tools, side-project platforms and any SaaS with one free and one paid tier.
FAQ
How do I change the plans, prices and features?
Edit PLANS at the top of the file. Each plan has its name, description, monthly price and annual price (the monthly amount when billed yearly), a featureHeading, a list of features, cta, href, an optional badge and featured, which raises the panel and fills the button. A plan whose monthly price is 0 shows "Free" instead of a number. The currency sign is CURRENCY, PHONE_FEATURES is how many features a phone shows before the toggle, and billedOf writes the line under each price.
How does the monthly and annual switch work?
It's a SegmentGroup labelled "Billing period": a group of two radio options, so arrow keys move between them and the choice is announced as "Annually, 2 of 2". Choosing one sets the billing state, Team's price rolls from 16 to 13 with SlidingNumber, and the line under it changes to "Billed annually at $156/year". The price row keeps a fixed height so the plans don't move.
What changes on a phone?
The plans stack with Team first, since it's the recommended one, so its button is reached within the first screen and a half, and Personal follows. Team's list shows its first five features and an "All 7 features" button reveals the rest; the button is a native button that reports whether the list is open. From the md breakpoint the plans sit side by side in their own order, Personal first, and every feature shows.
How do the two cards stay aligned?
From the md breakpoint each plan spans two rows of a shared grid with grid-rows-subgrid, so the headers line up and the prices, buttons and feature lists start at the same height, however long a description is. The name row keeps the height of the badge on both plans for the same reason.
How do I send the chosen billing period to checkout?
Each call to action is a real link. It's a ShineButton with asChild around an a element. Build the href from the plan and the billing state, for example /checkout?plan=team&billing=annually, and map each pair to its price on the server, so the page never decides what a customer is charged.