React List Group - Flowbite

The list group component can be used to show a list of items inside of an unordered list for website navigation, show a list of items inside of a card, and more.

You can choose from one of the examples below based on various styles and options and you can customize the component with React props and the classes from Tailwind CSS.

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

import { ListGroup } from "flowbite-react";

Default list group#

Use the default example to create a simple list of items inside of a menu by using the ListGroup component with ListGroupItem child components inside of it.

import { ListGroup, ListGroupItem } from "flowbite-react";

export function Component() {
  return (
    <div className="flex justify-center">
      <ListGroup className="w-48">
        <ListGroupItem>Profile</ListGroupItem>
        <ListGroupItem>Settings</ListGroupItem>
        <ListGroupItem>Messages</ListGroupItem>
        <ListGroupItem disabled>Download</ListGroupItem>
      </ListGroup>
    </div>
  );
}

List items as links#

Convert the list items into links by adding the href prop to the ListGroupItem component.

import { ListGroup, ListGroupItem } from "flowbite-react";

export function Component() {
  return (
    <div className="flex justify-center">
      <ListGroup className="w-48">
        <ListGroupItem href="#" active>
          Profile
        </ListGroupItem>
        <ListGroupItem href="#">Settings</ListGroupItem>
        <ListGroupItem href="#">Messages</ListGroupItem>
        <ListGroupItem href="#">Download</ListGroupItem>
      </ListGroup>
    </div>
  );
}

List group with buttons#

To create custom actions inside of the list group, use the onClick prop on the ListGroupItem component.

"use client";

import { ListGroup, ListGroupItem } from "flowbite-react";

export function Component() {
  return (
    <div className="flex justify-center">
      <ListGroup className="w-48">
        <ListGroupItem onClick={() => alert("Profile clicked!")} active>
          Profile
        </ListGroupItem>
        <ListGroupItem>Settings</ListGroupItem>
        <ListGroupItem>Messages</ListGroupItem>
        <ListGroupItem>Download</ListGroupItem>
      </ListGroup>
    </div>
  );
}

List group with icons#

Add icons to the list group items by using the icon prop on the ListGroupItem component.

"use client";

import { ListGroup, ListGroupItem } from "flowbite-react";
import { HiCloudDownload, HiInbox, HiOutlineAdjustments, HiUserCircle } from "react-icons/hi";

export function Component() {
  return (
    <div className="flex justify-center">
      <ListGroup className="w-48">
        <ListGroupItem icon={HiUserCircle} active>
          Profile
        </ListGroupItem>
        <ListGroupItem icon={HiOutlineAdjustments}>Settings</ListGroupItem>
        <ListGroupItem icon={HiInbox}>Messages</ListGroupItem>
        <ListGroupItem icon={HiCloudDownload}>Download</ListGroupItem>
      </ListGroup>
    </div>
  );
}

Theme#

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

{
  "root": {
    "base": "list-none rounded-lg border border-gray-200 bg-white text-left text-sm font-medium text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
  },
  "item": {
    "base": "[&>*]:first:rounded-t-lg [&>*]:last:rounded-b-lg [&>*]:last:border-b-0",
    "link": {
      "base": "flex w-full items-center border-b border-gray-200 px-4 py-2 dark:border-gray-600",
      "active": {
        "off": "hover:bg-gray-100 hover:text-cyan-700 focus:text-cyan-700 focus:outline-none focus:ring-2 focus:ring-cyan-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:text-white dark:focus:ring-gray-500",
        "on": "bg-cyan-700 text-white dark:bg-gray-800"
      },
      "disabled": {
        "off": "",
        "on": "cursor-not-allowed bg-gray-100 text-gray-900 hover:bg-gray-100 hover:text-gray-900 focus:text-gray-900"
      },
      "href": {
        "off": "",
        "on": ""
      },
      "icon": "mr-2 h-4 w-4 fill-current"
    }
  }
}

References#

• Flowbite List Group