shadcn.io is not affiliated with official shadcn/ui
Rate Matrix Pricing Block for React Aria
A rate matrix for a messaging API: four plans as columns with their base price and call to action first, then each metered unit as a row of allowance and overage rate, then platform and support rows.
Installation
Overview
Compare unit rates across tiers at a glance with this rate matrix pricing section. A compact header, a heading and one sentence that tells you how to read a cell, sits under the page's top rule and side rails, drawn by Guides. One table follows, framed between hairlines with a + mark on each corner. The four plans, On demand, Growth, Scale and Enterprise, are its columns, and the first row is each plan's head: its name, its base price and a Shine Button, so the way to buy is above every rate. Under Metered usage, each unit the product bills, texts, picture messages, voice minutes and phone numbers, is a row with a note on what it counts, and every cell gives the allowance included and the rate per unit beyond it, or says Custom for Enterprise. Under Platform and support, throughput, delivery receipts, short codes, support and the uptime SLA follow with checks, dashes and short values. The recommended Growth column carries a soft tint, a Recommended outline Badge and the one primary button. On a phone the matrix becomes plan tabs over one column of rows next to their names, so nothing scrolls sideways. Built with Table, Segment Group, Badge, Shine Button, Guides and Lucide icons, with CSS transitions only. For API platforms, messaging, communications and any metered product with an allowance and a rate per unit.
FAQ
How do I change the metrics, allowances and rates?
Edit METRICS for the metered rows: each has its label, a note under the name, the unit a rate buys ("per message"), and rates with each plan's included allowance (left out where the plan has none) and its overage rate in dollars per unit, or null for a custom rate. Rates are written with at least two decimals and up to four, so $0.02 and $0.0079 both read right. ROWS holds the platform and support rows, each with a value per plan: true for included, false for not included, or a short text. PLANS sets the columns, their base price (0 shows "No monthly fee", null shows "Custom"), call to action and recommended.
How do I connect the plan buttons to metered billing?
Each button in the head row is a real link: point it at a route that subscribes the customer to the plan's base price and attaches a metered price for each unit at the rates in the table, so your billing provider charges the overage at the end of each period. The On demand plan has no base price, so it needs only the metered prices. Each button is a ShineButton with href, which React Aria renders as a link.
Is the rate matrix accessible?
How does the wide table work on a phone?
Below the md breakpoint the table gives way to a second view of the same data: a Segment Group of the four plan names, with Growth selected, over one plan's price and button and then its rows as a list of names and values. Switching plan swaps the values and nothing scrolls sideways, even at 320 px, where the four names share the width.
How do I recommend a different plan?
Set recommended: true on that plan and false on the others. Its whole column takes a light tint, the Recommended badge sits beside its name, and its button takes the primary style while the others are outline. The phone tabs open on Growth; change the initial useState to open on another.
When should I use a rate matrix instead of plan cards?
Use a matrix when buyers price your product by usage and need to compare specific numbers, allowances and per-unit rates across several metrics and tiers, to estimate their own bill. Use plan cards when the difference between plans is mostly which features they include rather than how much each unit costs.