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 period toggle

Drive the amounts from your own state and let Segmented Control switch it:

{{-- 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>

#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