Svelte Lists - Flowbite

Use the list component to show an unordered or ordered list of items based on multiple styles, layouts, and variants built with Tailwind CSS and Flowbite

Get started with a collection of list components built with Tailwind CSS for ordered and unordered lists with bullets, numbers, or icons and other styles and layouts to show a list of items inside an article or throughout your web page.

Setup #

<script>
  import { List, Li } from 'flowbite-svelte';
</script>

Unordored list #

Use this example to create a default unordered list of items.

Password requirements

  • At least 10 characters (and up to 100 characters)
  • At least one lowercase character
  • Inclusion of at least one special character, e.g., ! @ # ?
  • Svelte
<script>
  import { Li, List, Heading } from 'flowbite-svelte';
</script>

<Heading
  tag="h2"
  customSize="text-lg font-semibold"
  class="mb-2 text-lg font-semibold text-gray-900 dark:text-white">Password requirements</Heading>
<List tag="ul" class="space-y-1">
  <Li>At least 10 characters (and up to 100 characters)</Li>
  <Li>At least one lowercase character</Li>
  <Li>Inclusion of at least one special character, e.g., ! @ # ?</Li>
</List>

Icons #

This example can be used to apply custom icons instead of the default bullets for the list items.

Password requirements

  • At least 10 characters (and up to 100 characters)
  • At least one lowercase character
  • Inclusion of at least one special character, e.g., ! @ # ?
  • Svelte
<script>
  import { List, Li, Heading } from 'flowbite-svelte';
</script>

<Heading
  tag="h2"
  customSize="text-lg font-semibold"
  class="mb-2 text-lg font-semibold text-gray-900 dark:text-white">Password requirements</Heading>
<List tag="ul" class="space-y-1" list="none">
  <Li icon>
    <svg
      class="w-4 h-4 mr-1.5 text-green-500 dark:text-green-400 flex-shrink-0"
      fill="currentColor"
      viewBox="0 0 20 20"
      xmlns="http://www.w3.org/2000/svg"
      ><path
        fill-rule="evenodd"
        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
        clip-rule="evenodd" /></svg>
    At least 10 characters (and up to 100 characters)
  </Li>
  <Li icon>
    <svg
      class="w-4 h-4 mr-1.5 text-green-500 dark:text-green-400 flex-shrink-0"
      fill="currentColor"
      viewBox="0 0 20 20"
      xmlns="http://www.w3.org/2000/svg"
      ><path
        fill-rule="evenodd"
        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
        clip-rule="evenodd" /></svg>
    At least one lowercase character
  </Li>
  <Li icon>
    <svg
      class="w-4 h-4 mr-1.5 text-gray-400 flex-shrink-0"
      fill="currentColor"
      viewBox="0 0 20 20"
      xmlns="http://www.w3.org/2000/svg"
      ><path
        fill-rule="evenodd"
        d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
        clip-rule="evenodd" /></svg>
    Inclusion of at least one special character, e.g., ! @ # ?
  </Li>
</List>

Nested #

Use this example to nested another list of items inside the parent list element.

  • List item one
    1. You might feel like you are being really "organized" o
    2. Nested navigation in UIs is a bad idea too, keep things as flat as possible.
    3. Nesting tons of folders in your source code is also not helpful.
  • List item two
    1. I'm not sure if we'll bother styling more than two levels deep.
    2. Two is already too much, three is guaranteed to be a bad idea.
    3. If you nest four levels deep you belong in prison.
  • List item three
    1. Again please don't nest lists if you want
    2. Nobody wants to look at this.
    3. I'm upset that we even have to bother styling this.
  • Svelte
<script>
  import { List, Li } from 'flowbite-svelte';
</script>

<List tag="ul" class="space-y-4">
  <Li
    >List item one
    <List tag="ol" class="pl-5 mt-2 space-y-1">
      <Li>You might feel like you are being really "organized" o</Li>
      <Li>Nested navigation in UIs is a bad idea too, keep things as flat as possible.</Li>
      <Li>Nesting tons of folders in your source code is also not helpful.</Li>
    </List>
  </Li>
  <Li
    >List item two
    <List tag="ol" class="pl-5 mt-2 space-y-1">
      <Li>I'm not sure if we'll bother styling more than two levels deep.</Li>
      <Li>Two is already too much, three is guaranteed to be a bad idea.</Li>
      <Li>If you nest four levels deep you belong in prison.</Li>
    </List>
  </Li>
  <Li
    >List item three
    <List tag="ol" class="pl-5 mt-2 space-y-1">
      <Li>Again please don't nest lists if you want</Li>
      <Li>Nobody wants to look at this.</Li>
      <Li>I'm upset that we even have to bother styling this.</Li>
    </List>
  </Li>
</List>

Unstyled #

Use the list="none" prop to disable the list style bullets or numbers.

Password requirements

  • At least 10 characters (and up to 100 characters)
  • At least one lowercase character
  • Inclusion of at least one special character, e.g., ! @ # ?
  • Svelte
<script>
  import { List, Li, Heading } from 'flowbite-svelte';
</script>

<Heading
  tag="h2"
  customSize="text-lg font-semibold"
  class="mb-2 text-lg font-semibold  text-gray-900 dark:text-white">Password requirements</Heading>
<List tag="ul" class="space-y-1" list="none">
  <Li>At least 10 characters (and up to 100 characters)</Li>
  <Li>At least one lowercase character</Li>
  <Li>Inclusion of at least one special character, e.g., ! @ # ?</Li>
</List>

Ordered list #

Use the tag="ol" prop to create an ordered list of items with numbers.

Top students:

  • Bonnie Green with 70 points
  • Jese Leos with 63 points
  • Leslie Livingston with 57 points
  • Svelte
<script>
  import { List, Li, Span, Heading } from 'flowbite-svelte';
</script>

<Heading
  tag="h2"
  customSize="text-lg font-semibold"
  class="mb-2 text-lg font-semibold  text-gray-900 dark:text-white">Top students:</Heading>
<List tag="ul" class="space-y-1">
  <Li><Span>Bonnie Green</Span> with <Span>70</Span> points</Li>
  <Li><Span>Jese Leos</Span> with <Span>63</Span> points</Li>
  <Li><Span>Leslie Livingston</Span> with <Span>57</Span> points</Li>
</List>

Nested #

This example can be used to nest multiple lists into each other.

  1. List item one
    • You might feel like you are being really "organized" o
    • Nested navigation in UIs is a bad idea too, keep things as flat as possible.
    • Nesting tons of folders in your source code is also not helpful.
  2. List item two
    • I'm not sure if we'll bother styling more than two levels deep.
    • Two is already too much, three is guaranteed to be a bad idea.
    • If you nest four levels deep you belong in prison.
  3. List item three
    • Again please don't nest lists if you want
    • Nobody wants to look at this.
    • I'm upset that we even have to bother styling this.
  • Svelte
<script>
  import { List, Li } from 'flowbite-svelte';
</script>

<List tag="ol" list="decimal">
  <Li
    >List item one
    <List tag="ul" class="pl-5 mt-2 space-y-1">
      <Li>You might feel like you are being really "organized" o</Li>
      <Li>Nested navigation in UIs is a bad idea too, keep things as flat as possible.</Li>
      <Li>Nesting tons of folders in your source code is also not helpful.</Li>
    </List>
  </Li>
  <Li
    >List item two
    <List tag="ul" class="pl-5 mt-2 space-y-1">
      <Li>I'm not sure if we'll bother styling more than two levels deep.</Li>
      <Li>Two is already too much, three is guaranteed to be a bad idea.</Li>
      <Li>If you nest four levels deep you belong in prison.</Li>
    </List>
  </Li>
  <Li
    >List item three
    <List tag="ul" class="pl-5 mt-2 space-y-1">
      <Li>Again please don't nest lists if you want</Li>
      <Li>Nobody wants to look at this.</Li>
      <Li>I'm upset that we even have to bother styling this.</Li>
    </List>
  </Li>
</List>

Description List #

Create a description list by using the tag="dl" prop and set the term and name with the following example.

Email address
yourname@flowbite.com
Home address
92 Miles Drive, Newark, NJ 07103, California, USA
Phone number
+00 123 456 789 / +12 345 678
  • Svelte
<script>
  import { List, Li, DescriptionList } from 'flowbite-svelte';
</script>

<List tag="dl" color="text-gray-900 dark:text-white divide-y divide-gray-200  dark:divide-gray-700">
  <div class="flex flex-col pb-3">
    <DescriptionList tag="dt" class="mb-1">Email address</DescriptionList>
    <DescriptionList tag="dd">yourname@flowbite.com</DescriptionList>
  </div>
  <div class="flex flex-col pb-3">
    <DescriptionList tag="dt" class="mb-1">Home address</DescriptionList>
    <DescriptionList tag="dd">92 Miles Drive, Newark, NJ 07103, California, USA</DescriptionList>
  </div>
  <div class="flex flex-col pb-3">
    <DescriptionList tag="dt" class="mb-1">Phone number</DescriptionList>
    <DescriptionList tag="dd">+00 123 456 789 / +12 345 678</DescriptionList>
  </div>
</List>

List with icon #

Use this example to create a list of items with custom SVG icons instead of the default bullets.

  • Individual configuration
  • No setup, or hidden fees
  • Team size: 1 developer
  • Premium support: 6 months
  • Free updates: 6 months
  • Svelte
<script>
  import { List, Li, Span } from 'flowbite-svelte';
</script>

<List tag="ul" class="mb-8 space-y-4" list="none">
  <Li icon class="gap-3">
    <svg
      class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
      fill="currentColor"
      viewBox="0 0 20 20"
      xmlns="http://www.w3.org/2000/svg"
      ><path
        fill-rule="evenodd"
        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
        clip-rule="evenodd" /></svg>
    Individual configuration
  </Li>
  <Li icon class="gap-3">
    <svg
      class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
      fill="currentColor"
      viewBox="0 0 20 20"
      xmlns="http://www.w3.org/2000/svg"
      ><path
        fill-rule="evenodd"
        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
        clip-rule="evenodd" /></svg>
    No setup, or hidden fees
  </Li>
  <Li icon class="gap-3">
    <svg
      class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
      fill="currentColor"
      viewBox="0 0 20 20"
      xmlns="http://www.w3.org/2000/svg"
      ><path
        fill-rule="evenodd"
        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
        clip-rule="evenodd" /></svg>
    <span>Team size: <Span>1 developer</Span></span>
  </Li>
  <Li icon class="gap-3">
    <svg
      class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
      fill="currentColor"
      viewBox="0 0 20 20"
      xmlns="http://www.w3.org/2000/svg"
      ><path
        fill-rule="evenodd"
        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
        clip-rule="evenodd" /></svg>
    <span>Premium support: <Span>6 months</Span></span>
  </Li>
  <Li icon class="gap-3">
    <svg
      class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
      fill="currentColor"
      viewBox="0 0 20 20"
      xmlns="http://www.w3.org/2000/svg"
      ><path
        fill-rule="evenodd"
        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
        clip-rule="evenodd" /></svg>
    <span>Free updates: <Span>6 months</Span></span>
  </Li>
</List>

Advanced layout #

This example can be used to show more details for each list item such as the user’s name, email and profile picture.

  • Neil profile

    Neil Sims

    email@flowbite.com

    $320
  • Bonnie profile

    Bonnie Green

    email@flowbite.com

    $3467
  • Michael profile

    Michael Gough

    email@flowbite.com

    $67
  • Thomas profile

    Thomas Lean

    email@flowbite.com

    $2367
  • Lana profile

    Lana Byrd

    email@flowbite.com

    $367
  • Svelte
<script>
  import { List, Li } from 'flowbite-svelte';
</script>

<List tag="ul" list="none" class="max-w-md divide-y divide-gray-200 dark:divide-gray-700">
  <Li class="pb-3 sm:pb-4">
    <div class="flex items-center space-x-4">
      <div class="flex-shrink-0">
        <img class="w-8 h-8 rounded-full" src="/images/profile-picture-1.webp" alt="Neil profile" />
      </div>
      <div class="flex-1 min-w-0">
        <p class="text-sm font-medium text-gray-900 truncate dark:text-white">Neil Sims</p>
        <p class="text-sm text-gray-500 truncate dark:text-gray-400">email@flowbite.com</p>
      </div>
      <div class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$320</div>
    </div>
  </Li>
  <Li class="py-3 sm:py-4">
    <div class="flex items-center space-x-4">
      <div class="flex-shrink-0">
        <img class="w-8 h-8 rounded-full" src="/images/profile-picture-2.webp" alt="Bonnie profile" />
      </div>
      <div class="flex-1 min-w-0">
        <p class="text-sm font-medium text-gray-900 truncate dark:text-white">Bonnie Green</p>
        <p class="text-sm text-gray-500 truncate dark:text-gray-400">email@flowbite.com</p>
      </div>
      <div class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$3467</div>
    </div>
  </Li>
  <Li class="py-3 sm:py-4">
    <div class="flex items-center space-x-4">
      <div class="flex-shrink-0">
        <img class="w-8 h-8 rounded-full" src="/images/profile-picture-3.webp" alt="Michael profile" />
      </div>
      <div class="flex-1 min-w-0">
        <p class="text-sm font-medium text-gray-900 truncate dark:text-white">Michael Gough</p>
        <p class="text-sm text-gray-500 truncate dark:text-gray-400">email@flowbite.com</p>
      </div>
      <div class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$67</div>
    </div>
  </Li>
  <Li class="py-3 sm:py-4">
    <div class="flex items-center space-x-4">
      <div class="flex-shrink-0">
        <img class="w-8 h-8 rounded-full" src="/images/profile-picture-4.webp" alt="Thomas profile" />
      </div>
      <div class="flex-1 min-w-0">
        <p class="text-sm font-medium text-gray-900 truncate dark:text-white">Thomas Lean</p>
        <p class="text-sm text-gray-500 truncate dark:text-gray-400">email@flowbite.com</p>
      </div>
      <div class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$2367</div>
    </div>
  </Li>
  <Li class="py-3 sm:py-4">
    <div class="flex items-center space-x-4">
      <div class="flex-shrink-0">
        <img class="w-8 h-8 rounded-full" src="/images/profile-picture-5.webp" alt="Lana profile" />
      </div>
      <div class="flex-1 min-w-0">
        <p class="text-sm font-medium text-gray-900 truncate dark:text-white">Lana Byrd</p>
        <p class="text-sm text-gray-500 truncate dark:text-gray-400">email@flowbite.com</p>
      </div>
      <div class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$367</div>
    </div>
  </Li>
</List>

Horizontal List #

Use this example to create a horizontally aligned list of items.

  • Svelte
<script>
  import { List, Li, A } from 'flowbite-svelte';
</script>

<List tag="ul" list="none" class="flex flex-wrap justify-center items-center mb-6">
  <Li>
    <A href="/" class="mr-4 hover:underline md:mr-6" textColor="text-gray-700 dark:text-white">About</A>
  </Li>
  <Li>
    <A href="/" class="mr-4 hover:underline md:mr-6" textColor="text-gray-700 dark:text-white">Premium</A>
  </Li>
  <Li>
    <A href="/" class="mr-4 hover:underline md:mr-6" textColor="text-gray-700 dark:text-white">Campaigns</A>
  </Li>
  <Li>
    <A href="/" class="mr-4 hover:underline md:mr-6" textColor="text-gray-700 dark:text-white">Blog</A>
  </Li>
  <Li>
    <A href="/" class="mr-4 hover:underline md:mr-6" textColor="text-gray-700 dark:text-white"
      >Affiliate Program</A>
  </Li>
  <Li>
    <A href="/" class="mr-4 hover:underline md:mr-6" textColor="text-gray-700 dark:text-white">FAQs</A>
  </Li>
</List>

Props #

The component has the following props, type, and default values. See types page for type information.

List #

  • Use the class prop to overwrite the list class.
Name Type Default
tag 'ul' | 'ol' | 'dl' 'ul'
list 'disc' | 'none' | 'decimal' | undefined undefined
position 'inside' | 'outside' 'inside'

Li #

  • Use the class prop to overwrite the li tag class.
Name Type Default
icon boolean false
liClass string ''

DescriptionList #

  • Use the class prop to overwrite the description tag class.
Name Type Default
tag 'dt' | 'dd'
dtClass string 'text-gray-500 md:text-lg dark:text-gray-400'
ddClass string 'text-lg font-semibold'
Link Paragraph