Pricing Table

The PricingTable component arranges PricingPlan items in a responsive grid.

Usage

import PricingTable from '~/components/sections/PricingTable.astro';
import PricingPlan from '~/components/sections/PricingPlan.astro';

<PricingTable>
  <PricingPlan 
    name="Basic" 
    price="$29" 
    features={['Feature 1', 'Feature 2']} 
    cta="Get Started"
  />
  <PricingPlan 
    name="Pro" 
    price="$99" 
    features={['All Basic features', 'Feature 3']} 
    popular
    cta="Buy Now"
  />
</PricingTable>

Example

Props

PricingTable

This component acts as a grid wrapper and accepts children.

PricingPlan

Prop	Type	Default	Description
name	string	Required	The name of the plan.
price	string	Required	The price display (e.g. “$29”).
description	string	undefined	A short description of the plan target.
features	string[]	[]	List of features included in the plan.
cta	string	Required	Text for the CTA button.
popular	boolean	false	Highlights the plan as recommended.