shadcn.io is not affiliated with official shadcn/ui
Receipt Accordion Pricing Philosophy Block for React
A pricing-philosophy section for a usage-billing company: four promises as accordion rows, each opening to a receipt whose lines, averages and cap are computed from the same numbers.
Installation
Overview
A pricing-philosophy section for React with Base UI. A compact header sits over four accordion rows from rail to rail, ruled by Guides: "You pay for what you use", "A bigger month never costs a bigger rate", "A quiet month is a cheap month" and "A spike never becomes a surprise". A closed row shows the promise and the total of its example month; an open row shows a receipt in a tinted inset, a table of usage, rate and amount with a total, plus a sentence made from the same numbers. Every amount is computed from the lines (the cap, the average rate, the total), so the table and the text never disagree. The first row is open on load, and the block ends on its last row. It's built from Guides and Accordion, with CSS transitions and your theme's tokens for every colour. For a pricing page's "how we think about billing" section, an about page for a metered product, or a trust page. The company and its figures are invented example data, not real prices.
FAQ
How are the receipts computed?
Each receipt is a list of lines (quantity, a rate in cents for per units) at the top of the file. The amount of a line, the receipt's total, the effect of a spend cap and the average rate in a sentence are all derived from those lines in small functions, in whole cents, so they always add up. Change a quantity or a rate and every figure that mentions it follows, including the total in the closed row.
Are these real prices?
No. Meterfold is a made-up company and the rates, quantities and caps are example figures chosen to show the idea. Replace them with your own pricing before you ship, and check each sentence still matches the numbers.
Is the receipt an accessible table?
Yes: it's a native table with a caption, column headers and a row header on every line, so a screen reader announces "Events ingested, rate, $0.40 per 1,000". The total is the last row of the table's footer, and amounts are isolated so a minus sign or a dollar sign stays attached in a right-to-left layout.
How do the rows work?
Each row is a heading with a button inside it, so a screen reader can list the four promises by heading and open any with Enter or Space. One row is open at a time, and the plus turns into a minus when it opens. A closed row's receipt isn't in the page until the row opens.
Related
- Pro
Principles Rail About
Principles and processA split about section for a release-management tool: a sticky title at the start, and six principles as stations on a hairline rail, each opening to what it means and how it shows up.
- Pro
Commitments Ledger About
Principles and processA ledger of a nonprofit CRM's public promises: an ordered list of rows with the promise, how far along it is as a word and a progress bar, who owns it and when it was last checked, and a tally counted from the rows.
- Pro
Guarantee Certificate About
Principles and processA home-warranty guarantee drawn as a certificate: a seal in SVG above the title, three promises with ticks, the fine print behind a disclosure that stays in the page, and a Shine Button to start a claim, in a card in card.
- Pro
A payroll co-op's report of seven measures over four quarters in Financial and Operational groups, a sparkline on every row, footnotes, and a quarter picker that rings one column.
- Pro
A framed table of seven company figures for an open-startup tracker: last quarter, this quarter, the computed change and a thin bar toward each target, sortable by metric, change or progress.
- Pro
Severity Ladder SLA About
Support and contactAn incident tool's four severities as bands, each with its response and resolution drawn as bars to scale on one log time axis, a compliance figure and a framed note on credits.