shadcn.io is not affiliated with official shadcn/ui
Two Plan Comparison Pricing Block for Vue
Self-hosted against cloud for a code host: two compact heads with their prices and buttons, over a nine-row matrix that marks the stronger side of each row.
Installation
Overview
Compare two ways to run one product with this two plan comparison section, shown here for Burrow, a code host you can run yourself or have us run. One figure is split down the middle by a single hairline, between the page's side rails drawn by Guides, with + marks on its corners. The heads come first: Self-hosted at $0 and the recommended Cloud at $19 per user a month on a lightly tinted cell with an outline Recommended Badge, each with its icon, a one-line description, its price and a Shine Button. Cloud's is the only filled button, and both are on the first screen. Under the heads, a shared matrix gives nine dimensions their own rows (setup, where your code lives, CI runners, backups, single sign-on, compliance, updates, support, licence), with both plans' values and a short note, and a check marks the stronger side of each row. Built with Badge, Guides, Shine Button and Lucide icons, with a CSS fade-up on first paint. For self-hosted versus cloud choices, open source versus managed offerings and any two-option pricing story where the trade-offs matter as much as the price.
FAQ
How do I change the two plans and the rows?
PLANS holds the two plans: each has its name, Lucide icon, description, price, the period written after it ("/ user / month") and periodSpoken, how a screen reader says it, plus cta, href and an optional badge. featured tints a plan's cell and gives it the filled button. SPECS holds the rows: a label and, under values, a value and note for each plan by its id. Set a row's winner to a plan's id to mark its stronger side, or leave it out when neither side wins.
How is the stronger side shown, and is it more than colour?
The winning value is set in a heavier weight and followed by a check, and a legend in the column strip says what the check means. Screen readers hear it in words: the value is followed by ", the stronger option". Rows without a winner show both values the same way, so the matrix never implies a winner it doesn't have.
How does a screen reader pair each value with its plan?
The matrix is a description list: each row's label is a term, and each plan's value is a definition that starts with the plan's name ("Cloud: 2 minutes, the stronger option, your workspace is ready at signup"). On narrow screens the plan names show above each value; from the md breakpoint the strip of column names takes over, hidden from screen readers, and the plan names stay in the list as visually hidden text, so every value still names its plan.
How does the layout change on small screens?
The two heads stack, Self-hosted first, and each keeps its price and button together; the button spans the width. In the matrix each row puts its label on a line of its own, then the two values one after the other, each headed by its plan's name. From the md breakpoint the heads sit next to each other, split by one hairline that runs down through the matrix. Nothing scrolls sideways, down to 320 px.
How does the recommended cell follow the theme?
Colour doesn't carry the recommendation: the cloud cell is a solid, light tint of the muted colour, which keeps muted text readable in light and dark mode and in every preset. What marks it is its outline badge and the filled button, the only one in the section, which takes the accent of whichever preset is active.