shadcn.io is not affiliated with official shadcn/ui
Feature Comparison Dashboard Block for Solid
Free, Pro and Team compared on eleven features with a column of blocked attempts, a must-have checkbox on each feature, and a recommendation of the cheapest plan that covers them all.
Installation
Overview
Find the cheapest plan that does everything your team needs, with this plan finder for Solid with Ark UI. A hairline frame with a plus mark on each corner holds a table of eleven features of a team wiki against the Free, Pro and Team plans, with the limit each plan gives (7 days of history, 5 guests, Included) or a minus where it is not offered, and a "Tried this month" column that counts how often each feature turned someone away. A Checkbox on every feature says you must have it; the cheapest plan whose column covers every ticked feature is marked Recommended, and the foot states it in a sentence with the price per seat, the difference from Free and how many of the features your team tried it unlocks. The one Shine Button reads Upgrade to Pro or Upgrade to Team and only changes this demo. With nothing ticked the answer is Free. Below the small breakpoint the attempts fold under the feature name and the table scrolls sideways inside a named region. It's built from Checkbox, Button, Shine Button, a native table and Guides. For plan pages in a settings area, not for a pricing page.
FAQ
How do I change the plans and features?
Edit PLANS and FEATURES. A feature lists what each plan gets in plan order, with null where the plan does not offer it, and the number of attempts it turned away. The recommendation, the highlighted column and the "unlocks N of M" count are derived from those rows and the ticked features.
How is the recommended plan chosen?
It is the first plan, cheapest first, where every ticked feature is offered at all. A limit such as 5 guests counts as offered; the recommendation does not compare limits, so check the cell if a number matters to you. The count of tried features only includes those that turned someone away this month.
What does the upgrade button do?
Nothing but write a line in the status area saying it only changes this demo. When Free already covers every must-have the button reads Stay on Free and says there is nothing to upgrade.
What stays local, and how do I wire it for real?
The plans, prices and attempts are typed and the ticks live in component state. To make it real, count blocked attempts from your entitlement checks, read prices from your billing provider, and send the upgrade to a checkout rather than the status line.