Five pricing sections — AI tiers with usage multipliers, a team calculator, usage-based volume pricing, a two-plan duo with a travelling glow border and a keyboard-driven terminal table — where prices roll digit by digit on every change.
AI tiers
ai-tiers.tsxFree, Pro and Team cards with a billing toggle and usage-multiplier tabs; prices roll and each plan's credit meter grows with the multiplier.
| Prop | Type | Default | Description |
|---|---|---|---|
plans | AiTierPlan[] | — | { id, name, tagline, monthly, yearly, credits, fixed?, features, cta?, featured?, badge? }. fixed plans ignore the multiplier. |
multipliers | UsageMultiplier[] | — | { id, label, factor, priceFactor }. Credits scale by factor, price by priceFactor. |
defaultBilling | "monthly" | "yearly" | "yearly" | Initial billing period. |
defaultMultiplier | string | — | Id of the multiplier selected first. |
yearlyNote | string | "2 months free" | Chip inside the yearly tab. |
creditUnit | string | "credits / mo" | Unit after the credit count. |
currency | string | "$" | Currency prefix. |
onSelectPlan | (selection: AiTierSelection) => void | — | Called with plan, billing, multiplier, price and credits. |
className | string | — | Classes for the outer section. |
Team calculator
team-calculator.tsxSeat slider, a discount staircase that lights the active tier and add-on switches feeding a receipt whose total rolls digit by digit.
| Prop | Type | Default | Description |
|---|---|---|---|
seatPrice | number | 18 | Price per seat per month before discounts. |
minSeats / maxSeats / defaultSeats | number | 1 / 150 / 32 | Slider range and starting value. |
tiers | CalculatorTier[] | — | { from, discount, label? } ascending by from. Drawn as the staircase. |
addOns | CalculatorAddOn[] | — | { id, label, description?, perSeat, defaultOn? } shown as switches. |
yearlyDiscount | number | 0.15 | Extra fraction off when billed yearly. |
defaultYearly | boolean | true | Start on yearly billing. |
cta | string | "Start a 14-day trial" | Button label under the total. |
onQuote | (quote: TeamQuote) => void | — | Called with seats, billing, add-ons and monthly total. |
className | string | — | Classes for the outer section. |
Usage slider
usage-slider.tsxUsage-based pricing: drag a volume slider over log-spaced stops while graduated price bands fill and the monthly estimate rolls.
| Prop | Type | Default | Description |
|---|---|---|---|
unit | string | "events" | Plural unit name. |
stops | number[] | — | Snap points for the slider, ascending; spread them roughly logarithmically. |
defaultVolume | number | 2500000 | Starting volume; snaps to the nearest stop. |
bands | UsageBand[] | — | { upTo, per1k } graduated bands. Use Infinity for the last band; per1k 0 shows Included. |
baseFee | number | 29 | Flat platform fee per month. |
cta | string | "Start sending events" | Button label. |
onQuote | (quote: { volume: number; total: number }) => void | — | Called when the button is pressed. |
className | string | — | Classes for the outer section. |
Plan duo
plan-duo.tsxTwo plans side by side; a solid volt glow travels around the featured card's border while a yearly switch rolls both prices.
| Prop | Type | Default | Description |
|---|---|---|---|
plans | [DuoPlan, DuoPlan] | — | { id, name, audience, monthly, yearly, lead?, features, cta?, featured?, note? }. |
defaultYearly | boolean | true | Start on yearly prices. |
glowDuration | number | 6 | Seconds for the glow to travel once around the featured card. |
currency | string | "$" | Currency prefix. |
onSelectPlan | (planId: string, yearly: boolean) => void | — | Called from each plan's button. |
className | string | — | Classes for the outer section. |
Command deck
command-deck.tsxMonospaced pricing table for developer tools: arrow keys or j/k move a springy row highlight, B flips billing and Enter writes the CLI command.
| Prop | Type | Default | Description |
|---|---|---|---|
plans | DeckPlan[] | — | { id, name, monthly, yearly, specs, recommended? }. specs keys match columns. |
columns | DeckColumn[] | — | { key, label, wide? }. wide columns hide on narrow containers. |
bin | string | "forge" | CLI name used in the prompt line. |
title | string | "pricing.toml" | Window title. |
defaultYearly | boolean | false | Start on yearly billing. |
onConfirm | (planId: string, yearly: boolean) => void | — | Called on Enter or a second click on the active row. |
className | string | — | Classes for the outer section. |
Install the whole set
Installs every pricing variant at once. Each section above has its own command for a single variant.
Pro installs use your private registry token. Add the @geturui-pro registry once — setup guide. The command works after you get Pro.
Also installs: Animated Badge, Button, Odometer Number, Range Slider, Switch, Tabs
Accessibility
- Billing and multiplier toggles are tablists with arrow-key navigation; prices keep their full value in an aria-label while digits roll.
- Sliders expose role="slider" with aria-valuetext that reads the volume and price, and support arrows, Page Up/Down, Home and End.
- Every motion beyond a fade (meters, glow border, row highlight, caret) is disabled under reduced motion.