Wensity

React pricing section components

A pricing section is a decision, not a brochure. These blocks start from the meters a buyer can drag, then show a receipt, a monthly total, and what annual billing would charge.

Browse all pricing blocksRead the docs

Built with the stack you already ship

React
Next.js
TypeScript
Tailwind CSS
Framer Motion
Vite
Astro
React
Next.js
TypeScript
Tailwind CSS
Framer Motion
Vite
Astro

Pricing section blocks you can copy

Each block is one file covering the meters, the receipt, and the responsive rules. Preview it live, then copy the source into your project.

SaaS surfaces that sit beside a pricing section

Feature proof and heavy product UI from the same library, for the page that has to earn the quote before it asks for a card.

How to choose a pricing section

A pricing section is not a second feature grid. The visitor already knows what the product claims to do. This block has to answer a narrower question: what the invoice will look like for the work they actually run. If the copy would also work as three equal cards with a Most Popular badge, it is too thin for this slot.

Pricing Section With Usage Receipt is for a metered product. The receipt sits above four slider boxes: team members, API requests, storage, and AI credits. Drag a meter and the matching line reprints. Monthly and annual sit on the receipt. Annual takes twenty percent off the monthly figure and names the yearly charge. Put every line in the DOM.

Start from the units, not from the vendor names. Seats, requests, gigabytes, and credits are answers a buyer can give without reading your SKU sheet. Base plan is a line on the receipt, not a mystery tier. If you lead with Gold, Silver, and Bronze, you are asking the visitor to reverse engineer a catalog they do not care about yet.

The shipped demo is a fictional API floor called Lumen. Replace the meters, the rates, the base plan, and the receipt labels before this goes to production. Keep the coupling. Changing a slider has to change a line. If the meters cannot change the total, you have built a toy.

Keep every line a number a finance lead could stand behind on a call. Eighteen seats at five dollars is a claim. Best for growing teams is not. The receipt is the audit trail of the quote. Soft adjectives belong in a blog post, not on a pricing section that will be screenshotted into a procurement packet.

Do not follow this block with another pricing wall on the same page. One receipt is already a decision. The next section should be a FAQ, a comparison of what is included, or the checkout itself. A second grid of three cards after a usage receipt usually means the team could not agree which pattern to ship.

Keep the buttons honest. Start with this estimate and Talk to billing belong here because some buyers will self serve and some will not. An empty button that jumps to a hash is worse than no button. If the estimate cannot actually be purchased from that click, change the label until it can.

Frequently asked questions

Run the Wensity CLI with the block slug, for example npx wensity@latest add pricing-section-with-usage-receipt --type block. The CLI writes the component into your codebase and pulls in the packages it needs. You can also open any pricing section on this page and copy the source from the Code tab. There is no provider to wire up.
Three cards work when the plans are self explanatory and the visitor already knows which seat they are. Use Pricing Section With Usage Receipt when price is metered and the visitor needs to see how seats, requests, storage, and credits add up. Mixing both on one page usually means the decision was not sorted first.
Four is the upper bound that still reads as one section on a laptop. Two is calmer if the product only varies by seats and volume. Six meters is a billing admin. If a slider cannot change a line on the receipt, cut it.
Yes. The meters stack above the receipt on a phone. Wide comparison tables, credit-plan columns, and included-price tables scroll horizontally so their rows stay readable instead of being squeezed. Test the longest receipt label and each scrollable table on a 360 pixel width before you ship.
After the product has proved itself, usually under a feature section or a short social proof strip. It should not be the first screen unless the page is a dedicated pricing route. By the time someone is dragging meters they have already decided the product is in the set. One receipt, then a FAQ or checkout.

Where to go next