Two Plan Comparison Pricing Block for React

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.

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.

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.

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.

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.

Each call to action is a real link. It's a ShineButton with render set to an a element and nativeButton={false}. Set the self-hosted plan's href to your releases or install docs, and the cloud plan's to your sign-up route, for example /signup?plan=cloud.