Pricing Table

Display a list of pricing options

npm run add PricingTable

Use the PricingTable component to display various pricing options or subscription plans in a clear, comparative layout, helping users make informed purchasing decisions. The component can be created with as little as three properties:

<PricingTable options={[{
    title: 'Simple Pricing Table',
    price: 'Free',
    features: [
        'Pricing Table with only required fields'
    ]
}]} />

The PricingTable component expects a single options prop in the form of an array of option objects. Each object must have at least the following properties:

• title: The title of the option.
• price: The price of the option.
• features: An array of strings that represents a list of features.

Sometimes, you may want to provide a period with a pricing such as monthly for subscriptions, or one-time for a single payment. This can be added by setting the period prop for an option object. You can also provide additional context by setting the priceSubText property too:

<PricingTable options={[{
    title: 'Pricing Table with Period',
    price: '$15',
    period: 'one-time',
    priceSubText: 'No hidden fees',
    features: [
        'Pay once, get access forever',
        'Priority support'
    ]
}]} />

CTAs

As seen in the above example, the PricingTable can be created with CTA buttons. To add them, use the buttons prop on the option object, that should reference an array of Button components:

<PricingTable options={[{
    title: 'Single CTA',
    price: '$15',
    features: [
        'Use any button prop'
    ],
    buttons: [{
        text: 'Get Started'
    }]
}]} />

<PricingTable options={[{
    title: 'Multiple CTA',
    price: '$15',
    features: [
        'Use any button prop'
    ],
    buttons: [{
        text: 'Get Started'
    }, {
        text: '🎁 Gift a subscription',
        theme: 'secondary'
    }]
}]} />

Ribbons

If you want to provide additional important information alongside with an option, you can use the ribbon prop to display that on top of the table:

<PricingTable options={[{
    ...
    ribbon: {
        label: 'Pricing Table with Ribbon'
    }
}]} />

<PricingTable options={[{
    ...
    ribbon: {
        label: 'Custom ribbon colors',
        colorText: 'var(--w-color-primary-70)',
        colorStart: 'var(--w-color-warning)',
        colorEnd: 'var(--w-color-warning-accent)'
    }
}]} />

You can use existing Webcore theme color CSS variables for your colors. See the theme documentation for all available color variables. If you want to globally specify a custom ribbon color for all of your pricing tables, the recommended way is to override the following CSS variables once:

html body {
    --w-pricing-table-ribbon-color: var(--w-color-primary);
    --w-pricing-table-ribbon-bg-start: var(--w-color-success);
    --w-pricing-table-ribbon-bg-end: var(--w-color-success-accent);
}

Recommended Option

In case you want to highlight one option from many, you can set the recommended property to true on an option object to scale up the option:

<PricingTable options={[
    { ... },
    {
        ribbon: {
            label: 'Recommended'
        },
        recommended: true,
        title: 'Standard',
        ...
    },
    { ... }
]} />

Glow Effect

If you want to further emphasize an option, you can also add a glow effect by setting the glow property of an option object to true or set secondary to false to use the primary color as the background:

<PricingTable options={[
    { ... },
    {
        ...,
        secondary: false,
        glow: true,
        glowOptions: {
            blurAmount: 50
        }
    },
    { ... }
]} />

You can further customize your glow effect by specifying a glowOptions property, which accepts any valid GradientCardProps type. Please see the API documentation of the GradientCard component to see available customization options.

API

type PricingTableProps = {
    options: {
        ribbon?: {
            colorText?: string
            colorStart?: string
            colorEnd?: string
            label: string
        },
        recommended?: boolean
        secondary?: boolean
        glow?: boolean
        glowOptions?: GradientCardProps
        title: string
        price: string
        period?: string
        priceSubText?: string
        features: string[]
        buttons?: ({
            text: string
            icon?: string
        } & ButtonProps)[]
    }[]
    className?: string
}