Pricing components
6 Pricing components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: BundleCard, PlanCard, PlanCatalogEditor, Price, PricingTable, UpgradeDialog.
- BundleCardSeveral apps sold together for less; shows the overlapping artwork stack, what it is for, the computed saving and the price against the separate total.
- PlanCardOne pricing plan on a quiet surface, with the recommended plan brand-tinted; PlanGrid lays plans side by side.
- PlanCatalogEditorAdmin editor for a product catalog (plans, features, apps, pay-as-you-go prices and bundles) that edits a draft and publishes it through a sync preview dry run and an apply step.
- PriceA locale-formatted price with currency, billing period suffix, optional struck-through original and a built-in "Free" label.
- PricingTablePlans from data with a Monthly / Yearly switch and working subscribe, upgrade and downgrade buttons, plus a feature comparison matrix and a compact plan picker.
- UpgradeDialogThe in-app ways to ask for an upgrade — a promotion popup with plans and an offer countdown, a banner, a sidebar card, a feature gate and a Pro badge.
TimeRangePicker
Picks the window a dashboard covers with relative presets (1h, 6h, 24h, 7d, 30d), a week navigator, custom days and an optional comparison period. The value is plain data that reads and writes to a URL, and days are read in a named time zone.
BundleCard
Several apps sold together for less; shows the overlapping artwork stack, what it is for, the computed saving and the price against the separate total.