Sections

Pricing Tier Cards

3-tier pricing cards with featured highlight, feature breakdown, and money-back guarantee.

pricingcardstierssubscriptionresponsive
Live Preview
Plans & Pricing

Simple, Predictable Pricing for Everyone

Start for free and upgrade as your Astro traffic scales. No surprise overage charges.

Community

Hobby

Great for learning Astro and small hobby sites.

$0 / forever
Get Started Free
  • ✓ 1 Active Project
  • ✓ Core UI Components
  • ✓ Community Support
  • ✓ MIT Open Source License
RECOMMENDED

Pro Developer

Perfect for freelancers and modern digital creators.

$29 / month
Get Pro Access
  • ✓ Unlimited Projects
  • ✓ All 200+ UI & 3D Components
  • ✓ Full Source Code & Figma Kit
  • ✓ Lifetime Updates
  • ✓ Direct Email Support
Agencies

Agency Team

For studios and multi-developer organizations.

$99 / month
Get Team License
  • ✓ Up to 10 Team Seats
  • ✓ Commercial Client Redistribution
  • ✓ Dedicated Slack Support Channel
  • ✓ Custom Component Requests
  • ✓ 1-on-1 Architecture Reviews

Usage

Copy and paste this code into your Astro page:

astro 
---
import { PricingTierCards } from 'astro-component-kit';
---

<PricingTierCards />
--- import { PricingTierCards } from 'astro-component-kit'; --- <PricingTierCards />

Manual Installation

If you are not using the npm package, create a new file src/components/sections/PricingTierCards.astro and paste the following code:

astro 
---
import { PricingTierCards } from 'astro-component-kit';
---

<PricingTierCards 
  badge="Plans & Pricing"
  title="Simple, Predictable Pricing for Everyone"
/>
--- import { PricingTierCards } from 'astro-component-kit'; --- <PricingTierCards badge="Plans & Pricing" title="Simple, Predictable Pricing for Everyone" />