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.

Designed for business teams like yours

Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.

Starter

Best option for personal use & for your next project.

$29 /month

Individual configuration
No setup, or hidden fees
Team size: 1 developer
Premium support: 6 months
Free updates: 6 months

Company

Relevant for multiple users, extended & premium support.

$99 /month

Individual configuration
No setup, or hidden fees
Team size: 10 developer
Premium support: 24 months
Free updates: 24 months

Enterprise

Best for large scale uses and extended redistribution rights.

$499 /month

Individual configuration
No setup, or hidden fees
Team size: 100+ developer
Premium support: 36 months
Free updates: 36 months

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>
    <svelte:fragment slot="h2">Designed for business teams like yours</svelte:fragment>
    <svelte:fragment slot="paragraph">Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.</svelte:fragment>
  </PricingHead>
  <div class="space-y-8 lg:grid lg:grid-cols-3 sm:gap-6 xl:gap-10 lg:space-y-0">
    <PricingCard>
      <PricingBodyHead>
        <svelte:fragment slot="h3">Starter</svelte:fragment>
        <svelte:fragment slot="paragraph">Best option for personal use & for your next project.</svelte:fragment>
        <svelte:fragment slot="price">
          <span class="mr-2 text-5xl font-extrabold">$29</span>
          <span class="text-gray-500 dark:text-gray-400">/month</span>
        </svelte:fragment>
      </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>

        <svelte:fragment slot="btn">
          <Button color="red">Get started</Button>
        </svelte:fragment>
      </PricingItemWrapper>
    </PricingCard>

    <PricingCard>
      <PricingBodyHead>
        <svelte:fragment slot="h3">Company</svelte:fragment>
        <svelte:fragment slot="paragraph">Relevant for multiple users, extended & premium support.</svelte:fragment>
        <svelte:fragment slot="price">
          <span class="mr-2 text-5xl font-extrabold">$99</span>
          <span class="text-gray-500 dark:text-gray-400">/month</span>
        </svelte:fragment>
      </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>

        <svelte:fragment slot="btn">
          <Button color="red">Get started</Button>
        </svelte:fragment>
      </PricingItemWrapper>
    </PricingCard>

    <PricingCard>
      <PricingBodyHead>
        <svelte:fragment slot="h3">Enterprise</svelte:fragment>
        <svelte:fragment slot="paragraph">Best for large scale uses and extended redistribution rights.</svelte:fragment>
        <svelte:fragment slot="price">
          <span class="mr-2 text-5xl font-extrabold">$499</span>
          <span class="text-gray-500 dark:text-gray-400">/month</span>
        </svelte:fragment>
      </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>

        <svelte:fragment slot="btn">
          <Button color="red">Get started</Button>
        </svelte:fragment>
      </PricingItemWrapper>
    </PricingCard>
  </div>
</Section>

Component data

Portfolio