AI Model Rates Pricing Block for React

Edit MODALITIES at the top of the file. Each modality has its tab label and icon, the spec column's name ("Context", "Max size", "Languages"), the prices columns' names, the unit a price buys ("per 1M tokens") and its models. A model has a name, a one-line description, its spec, an optional tag ("Cheapest", "Most capable") and rates: one price per column, in dollars, in the same order as prices, or null where the model doesn't offer it (a speech model has no audio-in rate).

It halves every rate on every tab: priceOf divides by two when the switch is on, and each price rolls to its new amount. Change the divisor in priceOf for another discount, or apply it to some columns only by checking the column's index. Prices always show exactly: decimalsOf picks two, three or four decimals so $0.075 and $0.0015 are written in full.

"Get an API key" is a real link. It's a ShineButton with render set to an a element and nativeButton={false}. Point it at your sign-up or console route. It's the only primary button, and the batch switch is drawn in your foreground colour so the two don't compete.

Yes. The modalities are real tabs, so the arrow keys move between them and each panel is named by its tab. Each table is named ("Text models, prices per 1M tokens"), its model names are row headers and each price column's header says what it's per. A rate a model doesn't offer is read as "Not offered". The batch switch is named for what it does, and the prices aren't a live region, so switching doesn't interrupt a screen reader.

Below the md breakpoint the table is hidden and each model becomes a compact card: its name and tag, its description and spec, then its rates side by side with their labels. The header's controls wrap under the sentence, so the call to action stays in the first screen. The table and the cards are both in the page, one hidden at a time with display, so a screen reader meets only the one you see.

Yes. Each modality names its own unit and columns, so a tab can price per image, per minute, per 1,000 characters or per request. Rename the tabs for your product's own split, such as Chat, Embeddings and Fine-tuning, and give each one the columns that matter to it.