React 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.

Start using the list component by first importing it from Flowbite React:

import { List } from 'flowbite-react';

Default list#

Use this example to create a default unordered list of items using the List component with List.Item child components inside of it.

Edit on GitHub
  • At least 10 characters (and up to 100 characters)
  • At least one lowercase character
  • Inclusion of at least one special character, e.g., ! @ # ?
'use client';

import { List } from 'flowbite-react';

function Component() {
  return (
    <List>
      <List.Item>At least 10 characters (and up to 100 characters)</List.Item>
      <List.Item>At least one lowercase character</List.Item>
      <List.Item>Inclusion of at least one special character, e.g., ! @ # ?</List.Item>
    </List>
  );
}

Nested#

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

Edit on GitHub
  • 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.
'use client';

import { List } from 'flowbite-react';

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

Unstyled#

Use the unstyled prop to disable the list style bullets or numbers.

Edit on GitHub
  • At least 10 characters (and up to 100 characters)
  • At least one lowercase character
  • Inclusion of at least one special character, e.g., ! @ # ?
'use client';

import { List } from 'flowbite-react';

function Component() {
  return (
    <List unstyled>
      <List.Item>At least 10 characters (and up to 100 characters)</List.Item>
      <List.Item>At least one lowercase character</List.Item>
      <List.Item>Inclusion of at least one special character, e.g., ! @ # ?</List.Item>
    </List>
  );
}

Ordered list#

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

Edit on GitHub
  1. At least 10 characters (and up to 100 characters)
  2. At least one lowercase character
  3. Inclusion of at least one special character, e.g., ! @ # ?
'use client';

import { List } from 'flowbite-react';

function Component() {
  return (
    <List ordered>
      <List.Item>At least 10 characters (and up to 100 characters)</List.Item>
      <List.Item>At least one lowercase character</List.Item>
      <List.Item>Inclusion of at least one special character, e.g., ! @ # ?</List.Item>
    </List>
  );
}

Horizontal list#

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

Edit on GitHub
  • About
  • Premium
  • Campaigns
  • Blog
  • Affiliate Program
  • FAQs
  • Contact
'use client';

import { List } from 'flowbite-react';

function Component() {
  return (
    <List horizontal>
      <List.Item>About</List.Item>
      <List.Item>Premium</List.Item>
      <List.Item>Campaigns</List.Item>
      <List.Item>Blog</List.Item>
      <List.Item>Affiliate Program</List.Item>
      <List.Item>FAQs</List.Item>
      <List.Item>Contact</List.Item>
    </List>
  );
}

Theme#

To learn more about how to customize the appearance of components, please see the Theme docs.

{
  "root": {
    "base": "space-y-1 text-gray-500 list-inside dark:text-gray-400",
    "ordered": {
      "off": "list-disc",
      "on": "list-decimal"
    },
    "horizontal": "flex flex-wrap items-center space-x-4 space-y-0 justify-center list-none",
    "unstyled": "list-none",
    "nested": "ps-5 mt-2"
  }
}

References#