Pricing Table Component for Astro, Svelte, and React

A clean, responsive, and configurable <PricingTable /> component for your existing Astro, Svelte, or React projects. Easily integrate it into your codebase by copy-pasting the relevant component into your codebase.

This component comes with the following features:

• Multiple framework support: The package includes code for the <PricingTable /> component written for React, Svelte, and Astro meaning you’ll get three different implementation with this product, so you can use it with different tech stacks.
• Configurable: Customize every aspect of the appearance of your pricing tables through the props. Set ribbons, package names, pricing, button labels, features, and much more. Create as many tables as you need:

// Import the relevant component
import { PricingTable } from '@components/PricingTable.tsx'
import PricingTable from '@components/PricingTable.svelte'
import PricingTable from '@components/PricingTable.astro'

// Setup your tables
const tables = [{
    ribbon: {
        type: 'green',
        label: 'Recommended'
    },
    recommended: true,
    title: 'Standard',
    pricing: '$15',
    period: '/month',
    features: [
        'No setup or hidden fees',
        'Email support'
    ],
    primaryCTA: {
        label: 'Get Started',
        link: '/get-started'
    }
    secondaryCTA: {
        icon: 'gift',
        label: 'Gift a subscription',
        link: '/gift'
    }
}]

// Calling the component
<PricingTable tables={tables} />

• Easy to style: Styles can be configured via Sass variables through the stylesheet provided with the component.
• Responsive: The layout is fully responsive that adapts perfectly for all device resolutions like mobiles, tablets and desktops.
• Cross-browser support: The component was tested on major browsers (Chrome, Firefox, and Edge) to ensure cross-browser compatibility.