Usage Quota

Usage limits. Pro · Shop and payments › Subscriptions and plans

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add usage-quota

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { UsageQuota } from 'valyro-ui-pro';

Prop	Type	Default
`meters` *	`UsageQuotaMeter[]`		Quotas shown as meters; the fullest one sets the card's status and upgrade message.
`variant`	`'card' \| 'compact'`	`'card'`	`card` — panel with header and upgrade footer; `compact` — dense rows for sidebars.
`title`	`ReactNode`		Defaults to `labels.title`.
`resetsAt`	`DateInput`		When the quota period restarts.
`onUpgrade`	`() => void`		Shows an upgrade call to action.
`locale`	`string`		BCP 47 locale for numbers and dates; defaults to the ThemeProvider's.
`labels`	`Partial<UsageQuotaLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Subscription Manager — Subscription management: status, features, quotas, billing and cancellation
Billing Plan Card — Subscription management
Subscription Plan Simulator — Pricing calculator: seats, monthly or yearly, VAT and an exact price breakdown
Product Card — Product card
Product Grid — Product catalog
Product Filters — Catalog filters
Product Spotlight — Featured product: tagged photo, price, rating and actions
Reviews Summary — Reviews: average rating, filterable histogram, sorting and helpful votes
Guided Product Finder — Product finder wizard: branching questions and why a product fits
Location Card — Store location: distance, opening hours, pickup options and ordering
Shopping Cart Drawer — Slide-out cart
Checkout Summary — Order summary at checkout