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>