shadcn.io is not affiliated with official shadcn/ui
Token Estimator Pricing Block for React
A bill estimator for an LLM gateway: choose a model, type the tokens in a prompt and a completion and the requests a day, and the monthly cost rolls to its amount beside a meter splitting the month's tokens into input and output.
Installation
Overview
Let developers price their own traffic before they sign up with this token estimator pricing section for React with Base UI. A compact header holds the headline and one sentence; below it a ruled band splits into two cells. On the left, a Select picks the model, with its input and output rates per 1M tokens underneath, and three Number Inputs take the tokens in a prompt, the tokens in a completion and the requests a day. On the right, the estimated cost a month is a display-size figure that rolls to its new amount with Sliding Number, over a meter that splits the month's tokens into input and output with each share spelled out, the cost of one request and the tokens one dollar buys. A Shine Button link, the section's only primary element, closes the result; on a phone it moves to a bar at the foot of the section with the live total beside it. 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 band ruled above and below with a + at each corner. Built with Select, Number Input, Sliding Number, Shine Button, Guides and CSS transitions only. For LLM gateways, inference APIs and any product billed per token.
FAQ
How do I change the models, rates and fee?
Edit MODELS at the top of the file: each model has a label, a value and its input and output prices in dollars per 1M tokens. HERON is the model the estimate opens on, FEE is what the gateway adds to every rate (0.05 is 5%), and DAYS turns requests a day into requests a month. LIMITS holds the largest value each field accepts.
How is the monthly cost worked out?
One request costs the prompt tokens times the model's input rate plus the completion tokens times its output rate, both per million, plus the fee. The month is that cost times the requests a day times 30. The meter splits the month's tokens by who wrote them: prompt tokens are input, completion tokens are output. Tokens per dollar is the tokens in one request divided by what that request costs. Everything is worked out from your inputs each time they change, nothing is stored.
What happens if I type something odd into a field?
An empty or unreadable field counts as zero, and a number past the field's limit counts as the limit, so the estimate never shows a negative or runaway figure. Each field is a real number input that groups thousands as you type, and the estimate follows every keystroke.
What does a screen reader hear?
Every field and the model menu are named ("Prompt tokens", "Requests a day", "Model"). The meter is an image with a text alternative ("Input 80% of tokens, output 20%"), and its shares are also written out below it. A polite live region announces the estimated cost after a change, so the rolling digits aren't read one by one.
Where does the call to action go?
"Start with Wren" is a real link. It's a ShineButton with render set to an a element and nativeButton={false}. Point it at your sign-up route, and add the model and the volume to its href if you want the console to open with them set. The estimate is a guide: the invoice comes from your metered token counts.
How does it look on a phone?
The two cells stack, the inputs first. The call to action leaves the result and sits in a bar at the foot of the section with the live monthly total, so the price and the button stay in view while you change a field. Both buttons are in the page, one hidden at a time with display, so a screen reader meets only the one you see.
Related
- Pro
AI Model Rates Pricing
Usage and creditsA 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.
- Pro
Usage Slider Pricing
CalculatorsA usage-based bill calculator for a search API: a slider over monthly search volumes sits in one short band, and a meter of what the plan covers and what is billed as overage rolls the estimated bill beside it.
- Pro
Pay As You Go Pricing
Usage and creditsUsage pricing for a serverless platform as rate rows: each billable resource with its free allowance, its starting rate at display size and the two volume steps that lower it, with one call to action in the header.
- Pro
Tiered API Pricing
Comparison tablesAPI tiers by request quota, with the quota as the headline: four columns open with 10k, 250k, 2M and 10M+ requests a month at display size, then the price, the overage rate and a call to action, over grouped limits and features.
- Pro
Pricing With Calculator
CalculatorsA receipt that prices itself, for a webhook-delivery service: number steppers for seats, events and days of history drive a live bill that stamps the cheapest plan and itemises what goes past its allowance.
- Pro
Overage Pricing
Usage and creditsOverage 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.