shadcn.io is not affiliated with official shadcn/ui
Overage Pricing Block for Solid
Overage pricing drawn as an area chart: pick a plan and see its monthly bill against the gigabytes ingested, a flat shaded block for the allowance and a rising wedge for every extra gigabyte, beside the price and a table of allowances.
Installation
Overview
Show what going over costs before it happens with this overage pricing section. A compact header, a heading and one sentence with a Segment Group of the three plans, Starter, Team and Scale, on its right, sits under the page's top rule and side rails, drawn by Guides. Below it, one framed panel with a + mark on each corner holds an area chart of the selected plan's monthly bill against the gigabytes ingested: a lightly shaded block under a flat line for the allowance, a darker wedge rising at the overage rate beyond it, a hairline where the allowance ends, and labels for the base price, the rate and the bill at three times the allowance. Beside it, the plan's price rolls to its new amount with Sliding Number, with what it includes and a Shine Button, the only filled control. A Table closes the panel with the allowance, overage rate, the bill at twice the allowance, retention, seats, alerts and support for every plan, the selected plan's column tinted. On a phone the price and button come first, then the chart and table, with no sideways scrolling. Built with Segment Group, Sliding Number, Table, Shine Button and Guides, with an inline SVG and CSS transitions only. For log, analytics and observability pricing and any plan that bills an allowance plus a rate for the overage.
FAQ
How do I change the plans, allowances and overage rates?
Edit the PLANS array at the top of the file. Each plan has its base price per month, included gigabytes at that price, the overage rate in dollars per gigabyte past it, a call to action, and the text for the table's retention, seats, alerts and support rows. The chart, the price, the summary line and the "bill at twice the allowance" row are all computed from those numbers by billAt, so changing a rate redraws the wedge and updates every figure. The ROWS array holds the table's rows; add one with a label and a function of the plan.
How is the chart drawn, and what does its axis show?
It's one inline SVG stretched over the plot: two filled paths for the allowance and the overage, a line along the top of both and a hairline at the end of the allowance, with strokes that stay one pixel wide however the plot scales. The horizontal axis always runs to three times the plan's allowance, and the vertical axis from zero to the bill at that point with some headroom, so every plan is drawn at the same size and the labels, a base price, a rate and an axis in gigabytes or terabytes, carry the plan's real numbers. The chart reads left to right in every language, so numbers are not mirrored in a right-to-left layout.
Is the chart accessible to screen readers?
The plot is an image with a sentence for its name that carries everything it shows: "Monthly bill on Team by gigabytes ingested: $399 flat up to 500 GB, then $0.60 for each extra gigabyte, reaching $999 at 1.5 TB." The labels drawn on it are hidden from screen readers so nothing is read twice, the table below repeats the same numbers as real data, and the plan switch is a radio group that arrow keys move through. The chart's colours are greys, and the lines and the order of the shading, not hue, tell the allowance from the overage.
How do I connect the call to action, and the overages?
The call to action is a real link for the plan being shown: point its href at your checkout with the plan id (/checkout?plan=team). Bill the overage with a metered price in your payment provider, at the rate shown for the plan, reported from your pipeline at the end of the period.
How does it work on a phone?
The plan switch stretches to the full width under the heading, and the selected plan's price and button come before the chart so the call to action is on the first screen. The chart is a little shorter and the table keeps all three plans in three narrow columns, with short values and the units in the row labels, so nothing scrolls sideways. In the table, the selected plan's column follows the switch.
When should I draw overage pricing instead of listing rates?
Draw it when buyers worry about the bill past the allowance: a flat block and a rising wedge show at a glance how much of the price is fixed and how steeply it grows, which a list of rates leaves to arithmetic. Keep the table for the exact numbers, and use a usage slider when you want visitors to put in their own volume and read one total.