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";

export 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";

export 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";

export 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";

export 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";

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

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.

Edit on GitHub
"use client";

import { List, Avatar } from "flowbite-react";

export function Component() {
  return (
    <List unstyled className="max-w-md divide-y divide-gray-200 dark:divide-gray-700">
      <List.Item className="pb-3 sm:pb-4">
        <div className="flex items-center space-x-4 rtl:space-x-reverse">
          <Avatar img="/images/people/profile-picture-1.jpg" alt="Neil image" rounded size="sm" />
          <div className="min-w-0 flex-1">
            <p className="truncate text-sm font-medium text-gray-900 dark:text-white">Neil Sims</p>
            <p className="truncate text-sm text-gray-500 dark:text-gray-400">[email protected]</p>
          </div>
          <div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$320</div>
        </div>
      </List.Item>
      <List.Item className="py-3 sm:py-4">
        <div className="flex items-center space-x-4 rtl:space-x-reverse">
          <Avatar img="/images/people/profile-picture-3.jpg" alt="Neil image" rounded size="sm" />
          <div className="min-w-0 flex-1">
            <p className="truncate text-sm font-medium text-gray-900 dark:text-white">Bonnie Green</p>
            <p className="truncate text-sm text-gray-500 dark:text-gray-400">[email protected]</p>
          </div>
          <div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$3467</div>
        </div>
      </List.Item>
      <List.Item className="py-3 sm:py-4">
        <div className="flex items-center space-x-4 rtl:space-x-reverse">
          <Avatar img="/images/people/profile-picture-2.jpg" alt="Neil image" rounded size="sm" />
          <div className="min-w-0 flex-1">
            <p className="truncate text-sm font-medium text-gray-900 dark:text-white">Michael Gough</p>
            <p className="truncate text-sm text-gray-500 dark:text-gray-400">[email protected]</p>
          </div>
          <div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$67</div>
        </div>
      </List.Item>
      <List.Item className="py-3 sm:py-4">
        <div className="flex items-center space-x-4 rtl:space-x-reverse">
          <Avatar img="/images/people/profile-picture-5.jpg" alt="Neil image" rounded size="sm" />
          <div className="min-w-0 flex-1">
            <p className="truncate text-sm font-medium text-gray-900 dark:text-white">Thomas Lean</p>
            <p className="truncate text-sm text-gray-500 dark:text-gray-400">[email protected]</p>
          </div>
          <div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$2367</div>
        </div>
      </List.Item>
      <List.Item className="pb-0 pt-3 sm:pt-4">
        <div className="flex items-center space-x-4 rtl:space-x-reverse">
          <Avatar img="/images/people/profile-picture-4.jpg" alt="Neil image" rounded size="sm" />
          <div className="min-w-0 flex-1">
            <p className="truncate text-sm font-medium text-gray-900 dark:text-white">Lana Byrd</p>
            <p className="truncate text-sm text-gray-500 dark:text-gray-400">[email protected]</p>
          </div>
          <div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$367</div>
        </div>
      </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";

export 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#