Vertical Tabs Panels Pricing Block for React

Edit the PLANS array at the top of the file. Each plan has an id, its name, tagline, description, monthly price per user (null shows "Custom"), three highlights (a Lucide icon, a label and a value, drawn as cells of one strip), its features, the call to action's cta and href, and popular, which adds the Best badge to its tab and a Most chosen badge to its panel. CURRENCY is the symbol written before every price. On a phone the tabs share one row in three equal columns, so keep to three plans or change grid-cols-3.

The button in each panel is a real link to its plan's href, so point it at your checkout or sign-up route with the plan in the address (/checkout?plan=business) and let your server map the plan to your payment provider's price, or at your contact form for Enterprise, which is priced on request. It's a ShineButton with render set to an a element and nativeButton={false}. Choosing a tab only switches the panel, so visitors can explore every plan freely.

Yes. They're real tabs: a vertical tab list named "Plans" whose tabs each control a panel, so a screen reader announces the tab, its position and the panel it opens. Tab reaches the selected plan, Arrow Up and Arrow Down move between plans (Home and End jump to the first and last), and Tab moves on into the open panel. Each tab reads its name, badge, tagline and price ("$25 per user per month"); in the panel the plan is an h3 under the section's h2, the highlights are a description list, and the call to action names its plan, as in "Start 14-day trial, Business plan". The selected tab is marked by its bar and surface, not by colour alone.

From the md breakpoint the tabs are a sidebar beside the panel. Below it the same tab list becomes a row of three tabs above the panel, each with its name and price, the taglines and the Best badge hidden to keep them short, and the selected one marked by a line under it; the highlights and feature list stack in one column, and it reads at 320px. The list stays a vertical tab list throughout, so Arrow Up and Down still move between plans on a keyboard, whatever the layout. The highlight moves to the new tab at once.

Use vertical tabs when each plan has more detail than a card can hold, such as highlights, long feature lists or a description per tier: the plan names stay in view while the detail beside them changes. Use a row of cards or a comparison table when plans differ in a few key features and seeing them side by side matters more than depth per plan.