Contrast Highlight Pricing Block for React

Edit the PLANS array at the top of the file. Each plan has its monthly price, its annual price (the monthly amount when billed yearly), a description, features as a list of strings with a featureHeading above them, the call to action's cta and href, and an optional badge. Set highlight: true on the plan that becomes the raised card with the primary button, and set HIGHLIGHT_ID to its id so the phone switch starts there. A plan whose prices are 0 shows Free instead of a price. FOLDED is how many features a phone shows before "All N features".

Each call to action is a real link to its plan's href. It's a ShineButton with render set to an a element and nativeButton={false}. Add the billing period to it, for example /checkout?plan=pro&billing=yearly, and let your server pick the matching price from your payment provider. The free plan can link straight to sign-up.

Yes. Nothing is a fixed colour and no plan takes a different theme scope. The raised cell uses the theme's own card colour with shadow-lg and a ring-foreground/15 ring, and its price and button sit on a bg-muted/50 panel inside it, so in a light theme it reads as a white card lifted off a flat row and in a dark theme as a lighter card with a visible edge. Its description and price line use the theme's muted text, its checkmarks the foreground, and its button is the theme's primary button. In a dark theme the shadow is quiet, so the ring carries the edge.

Below the md breakpoint a second switch named "Plan" shows one plan at a time, starting with the raised one, so its price and button come within the first screen. Each list shows its first five features and a ghost button, "All 7 features", that expands the rest and reads as expanded or collapsed to a screen reader. From md the three plans sit side by side, the switch is gone and every feature is shown.

The billing switch and the phone's plan switch are Segment Groups, radio groups named "Billing period" and "Plan": Tab reaches the selected option and the arrow keys move and select. Each price keeps its current amount in visually hidden text and isn't a live region, and "/user/mo" is read as "per user per month". Plans are h3 headings under the section's h2, and each call to action names its plan, as in "Start 14-day trial, Pro plan". The plans that aren't shown on a phone are hidden from the accessibility tree, so no focus lands on them.

Raise it when one plan should clearly lead, such as the middle of three tiers: a lifted card draws the eye before any badge is read, without spending the primary colour on a surface or forcing a dark section on a light page. A badge alone is quieter and keeps the plans equal, which suits pages where several plans fit different visitors equally well. The lift is md:-my-4 with matching extra padding, so the content stays aligned with the other plans; drop both to keep the card level with the row.