Accordion Plans Pricing Block for React

Edit the PLANS array at the top of the file. Each plan has its name, a description line (here the monthly volume and the price of 1,000 more emails), its monthly price, its annual price (the monthly amount when billed yearly, 20% off here), an optional badge, featured for the tinted row with the primary button, the featureHeading over its list, its features (plain strings, one checkmark each) and the call to action's cta and href. Five features per plan keep the open row short. CURRENCY is the symbol written before each price, and the "−20%" hint in the switch is plain text to change with the discount.

The Volume row opens on load because the Accordion starts with its id. Change defaultValue={["volume"]} to another plan's id, or to [] to start with every row closed; add multiple to let several rows stay open.

Each call to action is a real link to its plan's href: point it at your checkout or sign-up route with the plan and the billing period, for example /checkout?plan=volume&billing=annually, and let your server map them to your payment provider's price. It's a ShineButton with render set to an a element and nativeButton={false}.

Yes. Each row's name, badge, feature count and description are one button inside a heading, so a screen reader lists the plans as headings and announces whether each is expanded; Enter or Space opens and closes it. The price and call to action sit outside that button, so they're reached and read on their own: each price keeps its amount in visually hidden text with "per month", and each call to action names its plan, as in "Start 14-day trial, Volume plan". The billing switch is a radio group named "Billing period": arrow keys move and select.

From the sm breakpoint the rows share three columns through CSS subgrid (plan, price, call to action), so the prices end on one line and the buttons take the width of the longest label, with no fixed widths; a closed row is about 80 px tall on a desktop. On a phone each row stacks: the plan first, then its price with the button beside it, and the button moves under the price when the screen is too narrow for both, so the Volume button sits within the first screen and a half. An open row lists its features in one column on a phone, two from sm and three from lg. The digits are tabular, so switching the period doesn't move anything, and under reduced motion the prices change in place.

Use accordion pricing when vertical space is tight or plans have long feature lists: in a modal, a sidebar or a mobile-first page, visitors compare names and prices at a glance and open only the plan they care about. Use side-by-side cards or a comparison table when buyers need every plan's features in view at once to compare them line by line.