Pricing Comparison Matrix
Interactive pricing matrix with monthly/annual billing toggle, highlighted plan, and full feature checklist.
pricingmatrixcomparisontogglesaas
Live Preview
Flexible Plans
Transparent Pricing for High-Growth Teams
Choose the right plan to scale your digital products. No hidden fees, cancel anytime.
Monthly
Annual Save 20%
- ✓ Up to 3 Astro Projects
- ✓ All 200+ UI Components
- ✓ Community Discord Support
- ✕ Private Component Registry
- ✕ Dedicated Priority Support
Most Popular
Professional
For fast-moving teams and production web applications.
$ 49 /mo
Start 14-Day Free Trial - ✓ Unlimited Astro Projects
- ✓ All 200+ UI & 3D Components
- ✓ Figma UI Kit & Design Tokens
- ✓ Private NPM Team Access
- ✓ Priority Email & Chat Support
Enterprise
For organizations requiring custom SLAs and bespoke design systems.
$ 149 /mo
Contact Sales - ✓ Everything in Pro Plan
- ✓ Custom Component Engineering
- ✓ 99.99% Guaranteed SLA
- ✓ Dedicated Security Audit Support
- ✓ Dedicated Account Manager
30-Day unconditional money-back guarantee. No questions asked.
Usage
Copy and paste this code into your Astro page:
astro
---
import { PricingComparisonMatrix } from 'astro-component-kit';
---
<PricingComparisonMatrix />Manual Installation
If you are not using the npm package, create a new file src/components/sections/PricingComparisonMatrix.astro and paste the following code:
astro
---
import { PricingComparisonMatrix } from 'astro-component-kit';
---
<PricingComparisonMatrix
badge="Flexible Plans"
title="Transparent Pricing for High-Growth Teams"
/>