Flowbite Svelte: v0.46.14
Svelte: v5.0.0-next.179
SvelteKit: v2.5.18
Vite: v5.3.3

List

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.

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., ! @ # ?

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., ! @ # ?

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.

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., ! @ # ?

Ordered list

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

Top students:

  1. Bonnie Green with 70 points
  2. Jese Leos with 63 points
  3. Leslie Livingston with 57 points

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.

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

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

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

Horizontal List

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