Skip to main content
WireKit

Pricing Tables

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

Composed from: section, container, stack, grid, card, heading, text, row, button, badge, icon.

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" variant="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>