shadcn.io is not affiliated with official shadcn/ui
AI Model Rates Pricing Block for Svelte
A per-model rate card for an AI API: input, cached input and output prices per 1M tokens, with modality tabs for text, image and audio, and a batch switch that halves every rate.
Installation
Overview
Publish your model prices the way developers read them, with this AI rate card for Svelte with Ark UI. A compact header holds the headline, one sentence and the two controls a buyer needs first: a batch pricing Switch and a Shine Button to get an API key, the section's only primary element. Below it, Tabs pick the modality: text models priced per 1M tokens (input, cached input and output, with the context window), image models per image (standard and HD, with the largest size) and audio models per minute (audio in and out, with the languages). Each tab is a Table with one row per model, the prices large and in tabular figures; the cheapest and the most capable models carry an outline Badge. Turn on batch pricing and every rate rolls to half with Sliding Number. On a phone the table gives way to one compact card per model, its rates side by side. The section sits on the page's lines, drawn by Guides: side rails, a rule along its top with a + on each crossing, and the tab band ruled above and below with a + at each corner. Built with Tabs, Table, Switch, Badge, Sliding Number, Shine Button, Guides and Lucide icons, with CSS transitions only. For AI APIs, inference platforms and any product billed per token, image or minute.
FAQ
How do I change the models and their prices?
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).
What does the batch switch do, and can I change the discount?
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.
Where does the call to action go?
"Get an API key" is a real link. 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.
Is the rate card accessible?
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.
How does it look on a phone?
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.
Can I use it for prices that aren't per token?
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.