React List Group - Flowbite

Get started with the list group component to show a list of elements and menu items inside of an unordered list item built with React and Tailwind CSS

Table of Contents

Default list group

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

Edit on GitHub
  • React TypeScript
'use client';

import { ListGroup } from 'flowbite-react';

export default function DefaultListGroup() {
  return (
    <ListGroup>
      <ListGroup.Item>
        Profile
      </ListGroup.Item>
      <ListGroup.Item>
        Settings
      </ListGroup.Item>
      <ListGroup.Item>
        Messages
      </ListGroup.Item>
      <ListGroup.Item>
        Download
      </ListGroup.Item>
    </ListGroup>
  )
}

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

Edit on GitHub
  • React TypeScript
'use client';

import { ListGroup } from 'flowbite-react';

export default function ListGroupWithLinks() {
  return (
    <ListGroup>
      <ListGroup.Item
        active
        href="/list-group"
      >
        <p>
          Profile
        </p>
      </ListGroup.Item>
      <ListGroup.Item href="/list-group">
        Settings
      </ListGroup.Item>
      <ListGroup.Item href="/list-group">
        Messages
      </ListGroup.Item>
      <ListGroup.Item href="/list-group">
        Download
      </ListGroup.Item>
    </ListGroup>
  )
}

List group with buttons

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

Edit on GitHub
  • React TypeScript
'use client';

import { ListGroup } from 'flowbite-react';

export default function ListGroupWithButtons() {
  return (
    <ListGroup>
      <ListGroup.Item
        active
        onClick={()=>alert("Profile clicked!")}
      >
        <p>
          Profile
        </p>
      </ListGroup.Item>
      <ListGroup.Item>
        Settings
      </ListGroup.Item>
      <ListGroup.Item>
        Messages
      </ListGroup.Item>
      <ListGroup.Item>
        Download
      </ListGroup.Item>
    </ListGroup>
  )
}

List group with icons

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

Edit on GitHub
  • React TypeScript
'use client';

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

export default function ListGroupWithIcons() {
  return (
    <ListGroup>
      <ListGroup.Item
        active
        icon={HiUserCircle}
      >
        <p>
          Profile
        </p>
      </ListGroup.Item>
      <ListGroup.Item icon={HiOutlineAdjustments}>
        Settings
      </ListGroup.Item>
      <ListGroup.Item icon={HiInbox}>
        Messages
      </ListGroup.Item>
      <ListGroup.Item icon={HiCloudDownload}>
        Download
      </ListGroup.Item>
    </ListGroup>
  )
}

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-sm font-medium text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-left"
  },
  "item": {
    "base": "[&>*]:first:rounded-t-lg [&>*]:last:rounded-b-lg [&>*]:last:border-b-0",
    "link": {
      "base": "flex w-full border-b border-gray-200 py-2 px-4 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"
      },
      "href": {
        "off": "",
        "on": ""
      },
      "icon": "mr-2 h-4 w-4 fill-current"
    }
  }
}

References