Pricing Table

The plan grid every product page needs. Price formats a single amount; this is the block people choose from.

Basic Usage

<x-wirekit::pricing-table label="Plans">
    <x-wirekit::pricing-tier name="Free" :price="0" currency="EUR" period="mo" description="For trying things out">
        <x-slot:features>
            <x-wirekit::list spacing="sm">
                <li>1 project</li>
                <li>Community support</li>
            </x-wirekit::list>
        </x-slot:features>
        <x-slot:action>
            <x-wirekit::button intent="neutral" surface="outline" class="w-full">Start free</x-wirekit::button>
        </x-slot:action>
    </x-wirekit::pricing-tier>

    <x-wirekit::pricing-tier name="Pro" :price="29" currency="EUR" period="mo" description="For growing teams" featured>
        <x-slot:features>
            <x-wirekit::list spacing="sm">
                <li>Unlimited projects</li>
                <li>Priority support</li>
                <li>Audit log</li>
            </x-wirekit::list>
        </x-slot:features>
        <x-slot:action>
            <x-wirekit::button intent="primary" class="w-full">Choose Pro</x-wirekit::button>
        </x-slot:action>
    </x-wirekit::pricing-tier>

    <x-wirekit::pricing-tier name="Enterprise" price-label="Let us talk" description="For the whole company">
        <x-slot:features>
            <x-wirekit::list spacing="sm">
                <li>Everything in Pro</li>
                <li>SSO and SCIM</li>
                <li>A named contact</li>
            </x-wirekit::list>
        </x-slot:features>
        <x-slot:action>
            <x-wirekit::button intent="neutral" surface="outline" class="w-full">Contact sales</x-wirekit::button>
        </x-slot:action>
    </x-wirekit::pricing-tier>
</x-wirekit::pricing-table>

Amounts are formatted, not typed

Pass the raw amount and a currency. The tier renders it through Price, so every plan is formatted for the visitor's locale and no one hard-codes "€29" into copy.

{{-- 1. Raw number in — locale-formatted currency out --}}
<x-wirekit::pricing-tier name="Pro" :price="$plan->price_cents / 100" currency="EUR" period="mo" />

A tier with no number — "Let us talk" — uses priceLabel instead. It never invents an amount.

The featured plan

featured marks the plan you want chosen. It gets a badge and a ring — not a tint. A highlight that exists only as a color is invisible to a screen reader and to anyone who cannot separate your accent from your border.

It is deliberately not scaled up: enlarging one card reflows the row and makes the neighbors look broken on a phone.

Billing interval toggle

Give the table an intervals map and it renders the toggle itself. Each tier then carries interval-keyed prices, and switching costs no server round trip:

<x-wirekit::pricing-table :intervals="['monthly' => 'Monthly', 'annual' => 'Annual −20%']" :columns="2" label="Plans">
    <x-wirekit::pricing-tier
        name="Starter"
        :prices="['monthly' => 1900, 'annual' => 18200]"
        :periods="['monthly' => 'mo', 'annual' => 'yr']"
        :minor-units="true"
        currency="EUR"
        description="For a single project."
    />
    <x-wirekit::pricing-tier
        name="Team"
        :prices="['monthly' => 4900, 'annual' => 47000]"
        :periods="['monthly' => 'mo', 'annual' => 'yr']"
        :minor-units="true"
        currency="EUR"
        description="For a growing team."
        :featured="true"
    />
</x-wirekit::pricing-table>

Every amount is formatted on the server by the price component — the toggle only switches which one is visible, so your currency, locale and minor-unit rules are never reimplemented in JavaScript. Before JavaScript runs, the first interval is the one on screen.

<x-wirekit::pricing-table :intervals="['monthly' => 'Monthly', 'annual' => 'Annual −20%']">
    <x-wirekit::pricing-tier
        name="Team"
        :prices="['monthly' => 4900, 'annual' => 47000]"
        :periods="['monthly' => 'mo', 'annual' => 'yr']"
        :minor-units="true"
        currency="EUR"
    />
</x-wirekit::pricing-table>

A tier with a single flat price still works inside an interval table — a free plan does not need two amounts.

Driving the interval from your own state

When the choice has to reach the server — because it changes what you query, or you persist it — bind the table itself:

{{-- 1. The table owns the toggle and reports the choice like a form control. --}}
<x-wirekit::pricing-table wire:model.live="billing" interval="monthly">
    @foreach($plans as $plan)
        <x-wirekit::pricing-tier
            :name="$plan->name"
            :price="$billing === 'yearly' ? $plan->yearly : $plan->monthly"
            currency="EUR"
            :period="$billing === 'yearly' ? 'year' : 'mo'"
            :featured="$plan->is_popular"
        />
    @endforeach
</x-wirekit::pricing-table>

It works inside a plain <form> too — the value travels in a hidden input, so it submits under the name you give it without any JavaScript on your side:

{{-- 2. No Livewire anywhere. The choice arrives in $request->input('billing'). --}}
<form method="POST" action="/checkout">
    @csrf
    <x-wirekit::pricing-table name="billing" interval="yearly">…</x-wirekit::pricing-table>
    <x-wirekit::button type="submit">Continue</x-wirekit::button>
</form>

Before the table had interval, the way to do this was to keep the amounts on one property and switch them yourself with a separate Segmented Control. That still works and is worth knowing if your toggle drives more than the prices:

{{-- 1. One property decides which set of amounts renders --}}
<x-wirekit::segmented-control wire:model.live="billing" :options="['monthly' => 'Monthly', 'yearly' => 'Yearly (-20%)']" />

<x-wirekit::pricing-table>
    @foreach($plans as $plan)
        {{-- 2. The tier just renders the amount it is handed --}}
        <x-wirekit::pricing-tier
            :name="$plan->name"
            :price="$billing === 'yearly' ? $plan->yearly : $plan->monthly"
            currency="EUR"
            :period="$billing === 'yearly' ? 'year' : 'mo'"
            :featured="$plan->is_popular"
        />
    @endforeach
</x-wirekit::pricing-table>

Fitting the grid to your plans

columns sets how many plans sit side by side at the widest breakpoint — otherwise a two-plan table renders the three-column ladder and leaves a gap where the third plan would have been. One plan per row on a phone in every case.

<x-wirekit::pricing-table :columns="2">…</x-wirekit::pricing-table>

SEO

Emit Offer structured data alongside the table with Structured Data — but only for the plans the page actually shows.

Props

pricing-table

pricing-tier

Slots

Accessibility

• The table is a real <ul role="list"> with a label, and each plan is an <li> — so a screen reader announces "list, 3 items" and the reader knows how many plans they are comparing before they start.
• The featured highlight is never color-only (WCAG 1.4.1): the badge states "Most popular" in text; the ring is the visual echo, not the message.
• Every CTA is pinned to the same baseline (mt-auto), so the row stays scannable however uneven the feature lists are.
• Give each CTA a name that says which plan it buys ("Choose Pro"), not just "Choose" — a screen-reader user tabbing the row hears them out of context.

Keyboard Interaction

Pitfalls

• Do not hard-code the currency into copy. Pass price + currency and let Price format it.
• Do not invent a number for the enterprise tier. Use priceLabel.
• Do not scale the featured plan. It reflows the row on a phone; the ring and badge are enough.
• Do not label every CTA "Choose". Say which plan.

Design Tokens

Further Reading

• WCAG 1.4.1: Use of Color
• schema.org: Offer