---
title: Pricing Tables
description: Tier-based pricing displays with feature comparisons. Available in 3-tier and 2-tier layouts.
visibility: guest
draft: false
---

# Pricing Tables

Tier-based pricing displays with feature comparisons. Available in 3-tier and 2-tier layouts.

**Composed from:** `button`, `container`, `heading`, `list`, `pricing-table`, `pricing-tier`, `section`, `stack`, `text`.

## 3-Tier Pricing

The standard pricing layout with a highlighted "popular" tier. Use when you have a clear good / better / best progression and want to nudge readers toward the middle.

:::preview{title="Pricing — 3-Tier" wide}
<x-wirekit::section padding="2xl">
    <x-wirekit::container max="xl">
        <x-wirekit::stack gap="xl">
            <x-wirekit::stack gap="sm" align="center" style="text-align: center; max-width: 32rem; margin: 0 auto;">
                <x-wirekit::heading level="2" size="3xl">Simple, transparent pricing</x-wirekit::heading>
                <x-wirekit::text size="lg" intent="muted">Choose the plan that fits your needs. Upgrade or downgrade anytime.</x-wirekit::text>
            </x-wirekit::stack>
            <x-wirekit::pricing-table label="Plans">
                <x-wirekit::pricing-tier name="Starter" :price="9" currency="USD" period="mo" description="For individuals and small projects.">
                    <x-slot:features>
                        <x-wirekit::list spacing="sm">
                            <li>5 projects</li>
                            <li>10 GB storage</li>
                            <li>Email support</li>
                            <li>Basic analytics</li>
                        </x-wirekit::list>
                    </x-slot:features>
                    <x-slot:action>
                        <x-wirekit::button intent="neutral" surface="outline" class="w-full">Get Started</x-wirekit::button>
                    </x-slot:action>
                </x-wirekit::pricing-tier>

                <x-wirekit::pricing-tier name="Pro" :price="29" currency="USD" period="mo" description="For growing teams and businesses." featured featured-label="Most Popular">
                    <x-slot:features>
                        <x-wirekit::list spacing="sm">
                            <li>Unlimited projects</li>
                            <li>100 GB storage</li>
                            <li>Priority support</li>
                            <li>Advanced analytics</li>
                        </x-wirekit::list>
                    </x-slot:features>
                    <x-slot:action>
                        <x-wirekit::button class="w-full">Get Started</x-wirekit::button>
                    </x-slot:action>
                </x-wirekit::pricing-tier>

                <x-wirekit::pricing-tier name="Enterprise" :price="99" currency="USD" period="mo" description="For large organizations.">
                    <x-slot:features>
                        <x-wirekit::list spacing="sm">
                            <li>Everything in Pro</li>
                            <li>Unlimited storage</li>
                            <li>Dedicated support</li>
                            <li>SSO / SAML</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>
        </x-wirekit::stack>
    </x-wirekit::container>
</x-wirekit::section>
:::

## 2-Tier Pricing

Simpler layout for products with just two tiers — free / paid, or self-hosted / cloud. The two-card arrangement still gives the upgrade tier visual emphasis via the accent ring.

:::preview{title="Pricing — 2-Tier" wide}
<x-wirekit::section padding="2xl">
    <x-wirekit::container max="lg">
        {{-- columns="2": the table defaults to three, so a two-tier demo left the third
                 column empty and the pair rendered off to the left of the box
                 instead of centered in it. --}}
        <x-wirekit::pricing-table label="Plans" :columns="2">
            <x-wirekit::pricing-tier name="Free" :price="0" currency="USD" period="forever" description="Everything you need to get started — open source and self-hosted.">
                <x-slot:features>
                    <x-wirekit::list spacing="sm">
                        <li>Unlimited self-hosted instances</li>
                        <li>Community support</li>
                        <li>MIT licensed</li>
                    </x-wirekit::list>
                </x-slot:features>
                <x-slot:action>
                    <x-wirekit::button intent="neutral" surface="outline" class="w-full">Get Started</x-wirekit::button>
                </x-slot:action>
            </x-wirekit::pricing-tier>

            <x-wirekit::pricing-tier name="Pro" :price="19" currency="USD" period="mo" description="Managed hosting, team features and support." featured featured-label="Recommended">
                <x-slot:features>
                    <x-wirekit::list spacing="sm">
                        <li>Managed cloud hosting</li>
                        <li>Private team workspace</li>
                        <li>Email + chat support</li>
                        <li>Audit log + SSO</li>
                    </x-wirekit::list>
                </x-slot:features>
                <x-slot:action>
                    <x-wirekit::button class="w-full">Upgrade to Pro</x-wirekit::button>
                </x-slot:action>
            </x-wirekit::pricing-tier>
        </x-wirekit::pricing-table>
    </x-wirekit::container>
</x-wirekit::section>
:::