React List Group - Flowbite

Use the list group component to display a series of items, buttons or links inside a single element

Default list group

<ListGroup>
  <ListGroup.Item>
    Profile
  </ListGroup.Item>
  <ListGroup.Item>
    Settings
  </ListGroup.Item>
  <ListGroup.Item>
    Messages
  </ListGroup.Item>
  <ListGroup.Item>
    Download
  </ListGroup.Item>
</ListGroup>

List group with links

<ListGroup>
  <ListGroup.Item
    active
    href="/list-group"
  >
    Profile
  </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

<ListGroup>
  <ListGroup.Item
    active
    onClick={onClick}
  >
    Profile
  </ListGroup.Item>
  <ListGroup.Item>
    Settings
  </ListGroup.Item>
  <ListGroup.Item>
    Messages
  </ListGroup.Item>
  <ListGroup.Item>
    Download
  </ListGroup.Item>
</ListGroup>

List group with icons

<ListGroup>
  <ListGroup.Item
    active
    icon={HiUserCircle}
  >
    Profile
  </ListGroup.Item>
  <ListGroup.Item icon={HiOutlineAdjustments}>
    Settings
  </ListGroup.Item>
  <ListGroup.Item icon={HiInbox}>
    Messages
  </ListGroup.Item>
  <ListGroup.Item icon={HiCloudDownload}>
    Download
  </ListGroup.Item>
</ListGroup>