shadcn.io is not affiliated with official shadcn/ui
Receipt Accordion Pricing Philosophy Block for Ark UI
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 Ark 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. Closed rows stay in the page, so find-in-page can reach a receipt before it is opened.