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.

Pricing — 3-Tier

Simple, transparent pricing

Choose the plan that fits your needs. Upgrade or downgrade anytime.

Starter

For individuals and small projects.

$9.00 /mo
- 5 projects
- 10 GB storage
- Email support
- Basic analytics
Pro Most Popular

For growing teams and businesses.

$29.00 /mo
- Unlimited projects
- 100 GB storage
- Priority support
- Advanced analytics
Enterprise

For large organizations.

$99.00 /mo
- Everything in Pro
- Unlimited storage
- Dedicated support
- SSO / SAML

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

Pricing — 2-Tier

Free

Everything you need to get started — open source and self-hosted.

$0.00 /forever
- Unlimited self-hosted instances
- Community support
- MIT licensed
Pro Recommended

Managed hosting, team features and support.

$19.00 /mo
- Managed cloud hosting
- Private team workspace
- Email + chat support
- Audit log + SSO

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