Flat Rate Pricing Block for React

Edit the constants at the top of the file. PRICE is the monthly amount for the company and CURRENCY the symbol before it. METERS lists what you never charge by, written as "per ..." phrases; each is struck through with <s> and followed by hidden text "(not charged)", so a screen reader doesn't read a list of prices you don't have. GROUPS holds the four cells, each with a name and its features; the "All 16 features" label is counted from them.

The call to action is a real link in the band's last cell. Point it at your sign-up or checkout; a flat rate has nothing to choose, so there is nothing to pass along. The link is render={<a href="#" />} on ShineButton, with nativeButton={false}: change its href.

Yes. The meters are a real list under a visible label, "What you'll never pay", and each item carries a visually hidden "(not charged)", so the meaning doesn't depend on the line through the text. The strike uses decoration-foreground at two pixels so it stays visible on the muted text in every theme.

From lg the band is three cells in a row (price, meters, call to action) divided by single hairlines; below it they stack, and the price drops from text-9xl to text-7xl at the narrowest. The meters wrap onto as many lines as they need. In a right-to-left layout the cells run in the opposite order, and the price is isolated with dir="ltr" so the $ stays before the number.

The price, the meters and the call to action stack and take about one screen, with the button visible before the first fold ends. The feature cells show only their first five features, counted across the cells, until the "All 16 features" button (aria-expanded) is pressed; cells with nothing visible hide their heading. From md all sixteen are shown.

When your customers' usage varies a lot but your costs don't scale with it, or when predictability is the product. A flat rate removes the reason to ration, which is a selling point for invoicing, team tools and anything used in bursts. If heavy users cost you much more than light ones, a metered or tiered plan protects your margin better.