flowbite-svelte-son/src/routes/typography/list.md

Flowbite components for Svelte

---
layout: typographyLayout
title: Svelte Lists - Flowbite
breadcrumb_title: Lists
dir: Typography
description: 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
---

<MetaTag {breadcrumb_title} {title} {dir} {description}/>

<script>
  import { Htwo, ExampleDiv, GitHubSource, CompoDescription, TableProp, TableDefaultRow , MetaTag } from '../utils'
  import { A, Heading, Breadcrumb, BreadcrumbItem } from '$lib'
  
  import { props as items1 } from '../props/List.json'
  import { props as items2 } from '../props/Li.json'
  import { props as items3 } from '../props/Span.json'
  import { props as items4 } from '../props/DescriptionList.json'
  let propHeader = ['Name', 'Type', 'Default']
  let divClass='w-full relative overflow-x-auto shadow-md sm:rounded-lg py-4'
  let theadClass ='text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-white'
</script>

<Breadcrumb class="pt-16 py-8">
  <BreadcrumbItem href="/" home >Home</BreadcrumbItem>
  <BreadcrumbItem>{dir}</BreadcrumbItem>
  <BreadcrumbItem>{breadcrumb_title}</BreadcrumbItem>
</Breadcrumb>

<Heading class="mb-2" tag="h1" customSize="text-3xl">{title}</Heading>

<CompoDescription>{description}</CompoDescription>

<ExampleDiv>
<GitHubSource href="buttongroups/P.svelte">Li</GitHubSource>
<GitHubSource href="buttongroups/A.svelte">Ul</GitHubSource>
</ExampleDiv>

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.

<Htwo label="Setup" />

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

<Htwo label="Unordored list" />

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

```svelte example
<script>
  import { Li, Heading, List } 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>
```

<Htwo label="icons" />

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

```svelte example
<script>
  import { Heading, List, Li } 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>
```

<Htwo label="Nested" />

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

```svelte example
<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>
```

<Htwo label="Unstyled" />

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

```svelte example
<script>
  import { Heading, List, Li } 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>
```

<Htwo label="Ordered list" />

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

```svelte example
<script>
  import { Heading, List, Li, Span } 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>
```

<Htwo label="Nested" />

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

```svelte example
<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>
```

<Htwo label="Description List" />

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

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

<List tag="dl" color="text-gray-900 dark:text-white">
  <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>
```

<Htwo label="List with icon" />

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

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

<List tag="ul" class="mb-8 space-y-4" list="none">
  <Li icon class="space-x-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="space-x-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="space-x-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>
    Team size: <Span>1 developer</Span>
  </Li>
  <Li icon class="space-x-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>
    Premium support: <Span>6 months</Span>
  </Li>
  <Li icon class="space-x-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>
    Free updates: <Span>6 months</Span>
  </Li>
</List>
```

<Htwo label="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.

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

<List tag="ul" class="divide-y divide-gray-200 dark:divide-gray-700">
  <Li class="pb-3 sm:pb-4" icon>
    <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" icon>
    <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" icon>
    <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" icon>
    <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" icon>
    <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>
```

<Htwo label="Horizontal List" />

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

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

<List tag="ul" list="none" ulClass="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>
```

<Htwo label="Props" />

The component has the following props, type, and default values. See <A href="/pages/types">types page</A> for type information.

<Heading tag="h3" customSize="text-xl font-semibold" class="mb-4 mt-8">List</Heading>

<TableProp header={propHeader} {divClass} {theadClass}>
  <TableDefaultRow items={items1} rowState='hover' />
</TableProp>

<Heading tag="h3" customSize="text-xl font-semibold" class="mb-4 mt-8">Li</Heading>

<TableProp header={propHeader} {divClass} {theadClass}>
  <TableDefaultRow items={items2} rowState='hover' />
</TableProp>

<Heading tag="h3" customSize="text-xl font-semibold" class="mb-4 mt-8">Span</Heading>

<TableProp header={propHeader} {divClass} {theadClass}>
  <TableDefaultRow items={items3} rowState='hover' />
</TableProp>

<Heading tag="h3" customSize="text-xl font-semibold" class="mb-4 mt-8">DescriptionList</Heading>

<TableProp header={propHeader} {divClass} {theadClass}>
  <TableDefaultRow items={items4} rowState='hover' />
</TableProp>