Svelte Pricing Tables - Flowbite Svelte Blocks
Get started with a collection of responsive pricing sections to show the pricing plan to your potential customers based on multiple sizes, styles, and layouts.
Default pricing table #
Use this example of three pricing cards showcasing the pricing plan title, description, feature list, and CTA button.
- Svelte
<script lang="ts">
import { Section, PricingBodyHead, PricingCard, PricingItemWrapper, PricingHead, PricingItem } from 'flowbite-svelte-blocks';
import { Button } from 'flowbite-svelte';
</script>
<Section name="pricing">
<PricingHead>
{#snippet h2()}Designed for business teams like yours{/snippet}
{#snippet paragraph()}Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.{/snippet}
</PricingHead>
<div class="space-y-8 sm:gap-6 lg:grid lg:grid-cols-3 lg:space-y-0 xl:gap-10">
<PricingCard>
<PricingBodyHead>
{#snippet h3()}Starter{/snippet}
{#snippet paragraph()}Best option for personal use & for your next project.{/snippet}
{#snippet price()}
<span class="mr-2 text-5xl font-extrabold">$29</span>
<span class="text-gray-500 dark:text-gray-400">/month</span>
{/snippet}
</PricingBodyHead>
<PricingItemWrapper>
<PricingItem class="text-green-500 dark:text-green-400">
<span>Individual configuration</span>
</PricingItem>
<PricingItem class="text-green-500 dark:text-green-400">
<span>No setup, or hidden fees</span>
</PricingItem>
<PricingItem class="text-green-500 dark:text-green-400">
<span>Team size: <span class="font-semibold">1 developer</span></span>
</PricingItem>
<PricingItem class="text-green-500 dark:text-green-400">
<span>Premium support: <span class="font-semibold">6 months</span></span>
</PricingItem>
<PricingItem class="text-green-500 dark:text-green-400">
<span>Free updates: <span class="font-semibold">6 months</span></span>
</PricingItem>
{#snippet btn()}
<Button color="red">Get started</Button>
{/snippet}
</PricingItemWrapper>
</PricingCard>
<PricingCard>
<PricingBodyHead>
{#snippet h3()}Company{/snippet}
{#snippet paragraph()}Relevant for multiple users, extended & premium support.{/snippet}
{#snippet price()}
<span class="mr-2 text-5xl font-extrabold">$99</span>
<span class="text-gray-500 dark:text-gray-400">/month</span>
{/snippet}
</PricingBodyHead>
<PricingItemWrapper>
<PricingItem class="text-green-500 dark:text-green-400">
<span>Individual configuration</span>
</PricingItem>
<PricingItem class="text-green-500 dark:text-green-400">
<span>No setup, or hidden fees</span>
</PricingItem>
<PricingItem class="text-green-500 dark:text-green-400">
<span>Team size: <span class="font-semibold">10 developer</span></span>
</PricingItem>
<PricingItem class="text-green-500 dark:text-green-400">
<span>Premium support: <span class="font-semibold">24 months</span></span>
</PricingItem>
<PricingItem class="text-green-500 dark:text-green-400">
<span>Free updates: <span class="font-semibold">24 months</span></span>
</PricingItem>
{#snippet btn()}
<Button color="red">Get started</Button>
{/snippet}
</PricingItemWrapper>
</PricingCard>
<PricingCard>
<PricingBodyHead>
{#snippet h3()}Enterprise{/snippet}
{#snippet paragraph()}Best for large scale uses and extended redistribution rights.{/snippet}
{#snippet price()}
<span class="mr-2 text-5xl font-extrabold">$499</span>
<span class="text-gray-500 dark:text-gray-400">/month</span>
{/snippet}
</PricingBodyHead>
<PricingItemWrapper>
<PricingItem class="text-green-500 dark:text-green-400">
<span>Individual configuration</span>
</PricingItem>
<PricingItem class="text-green-500 dark:text-green-400">
<span>No setup, or hidden fees</span>
</PricingItem>
<PricingItem class="text-green-500 dark:text-green-400">
<span>Team size: <span class="font-semibold">100+ developer</span></span>
</PricingItem>
<PricingItem class="text-green-500 dark:text-green-400">
<span>Premium support: <span class="font-semibold">36 months</span></span>
</PricingItem>
<PricingItem class="text-green-500 dark:text-green-400">
<span>Free updates: <span class="font-semibold">36 months</span></span>
</PricingItem>
{#snippet btn()}
<Button color="red">Get started</Button>
{/snippet}
</PricingItemWrapper>
</PricingCard>
</div>
</Section>