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>
  );
}

Icons#

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

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";
import { HiCheckCircle } from "react-icons/hi";

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

Nested#

Use this example to nest 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": "list-inside space-y-1 text-gray-500 dark:text-gray-400",
    "ordered": {
      "off": "list-disc",
      "on": "list-decimal"
    },
    "horizontal": "flex list-none flex-wrap items-center justify-center space-x-4 space-y-0",
    "unstyled": "list-none",
    "nested": "mt-2 ps-5"
  },
  "item": {
    "withIcon": {
      "off": "",
      "on": "flex items-center"
    },
    "icon": "me-2 h-3.5 w-3.5 flex-shrink-0"
  }
}

References#