Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Onboarding blocks

Pro

Plan Selection Onboarding Block for Solid

A plan step as a whole screen: a team size from 1 to 50 moves the Recommended badge between Solo, Team and Business, each row slides to its own total, and a Monthly or Yearly switch shows the saving.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Recommend a plan from the size of the team, with this plan step for Solid with Ark UI. It is a whole screen of Seatwick, a team scheduling app: the page's rails and one band, a step header ("Step 5 of 7" and a hairline), and a framed panel that opens with the team's size (Number Input, 1 to 50) and a Monthly or Yearly Segment Group. Three plan rows (Solo, Team and Business) are native radios on hairlines; the size decides which carries the Recommended Badge, and each row works out its total as seats times its price with a Sliding Number. A row's "What's included" opens in a Collapsible. The panel ends on what you pay: "Today $0. Then $48 a month for 4 seats." The one Shine Button is Start free.

FAQ

How is a plan recommended?

The smallest plan that covers the seats: Solo for one person, Team up to 15 seats and Business up to 50. Change the count and the badge moves; the plan you have chosen stays chosen. Until you press a row, the recommended one is the selection, so a new count moves both.

What if the chosen plan is too small?

Start free refuses in a line ("Team covers up to 15 seats.") and leaves the rows alone, so you can pick another or lower the count. Nothing is hidden or greyed out, because every row's price is still worth comparing.

How does yearly billing change the figures?

Paying yearly takes 20% off each paid plan: the row totals, the sentence under the rows and the saving ("Pay yearly to save $115 a year.") all follow the switch. Solo stays free, so its row reads $0 either way.

What stays local in the demo, and how do I wire it?

Everything: nothing is charged and no subscription is created; Start free says "Started on Team in this demo." In your app create the subscription from start with the plan, the seat count and the billing period, and load your own prices into PLANS.

How does the seat box behave?

It takes whole numbers only. A wrong value shows a sentence under the box after you leave it, and the rows keep the last good count. The rows update as you type.

How does it look on a phone?

The size box and the billing switch stack, the rows keep their total at the end, and Start free pins to the bottom of the screen with its status line.

All 100 onboarding blocks