# Pricing components

> 6 Pricing components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: BundleCard, PlanCard, PlanCatalogEditor, Price, PricingTable, UpgradeDialog.

Source: https://docs.nasaqui.com/components/groups/pricing

- [BundleCard](https://docs.nasaqui.com/components/bundle-card): 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.
- [PlanCard](https://docs.nasaqui.com/components/plan-card): One pricing plan on a quiet surface, with the recommended plan brand-tinted; PlanGrid lays plans side by side.
- [PlanCatalogEditor](https://docs.nasaqui.com/components/plan-catalog-editor): Admin 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.
- [Price](https://docs.nasaqui.com/components/price): A locale-formatted price with currency, billing period suffix, optional struck-through original and a built-in "Free" label.
- [PricingTable](https://docs.nasaqui.com/components/pricing-table): Plans from data with a Monthly / Yearly switch and working subscribe, upgrade and downgrade buttons, plus a feature comparison matrix and a compact plan picker.
- [UpgradeDialog](https://docs.nasaqui.com/components/upgrade-prompt): The 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.