Component Library
Browse and explore components
ListGroup
An Avatar is a UI component used to represent a user with an image, icon, or initials.
Default list group
Component Code
Copy Code
import { ListGroup, ListGroupItem } from 'flowbite-react'
const DefaultListcode = () => {
return (
<div>
<ListGroup>
<ListGroupItem>Profile</ListGroupItem>
<ListGroupItem>Settings</ListGroupItem>
<ListGroupItem>Messages</ListGroupItem>
<ListGroupItem disabled>Download</ListGroupItem>
</ListGroup>
</div>
)
}
export default DefaultListcode
Component Code
Copy Code
import { ListGroup, ListGroupItem } from 'flowbite-react';
const LinkListCode = () => {
return (
<div>
<ListGroup>
<ListGroupItem href='#' active>
Profile
</ListGroupItem>
<ListGroupItem href='#'>Settings</ListGroupItem>
<ListGroupItem href='#'>Messages</ListGroupItem>
<ListGroupItem href='#'>Download</ListGroupItem>
</ListGroup>
</div>
)
}
export default LinkListCode
List group with buttons
Component Code
Copy Code
import { ListGroup, ListGroupItem } from 'flowbite-react'
const ListButtonCode = () => {
return (
<div>
<ListGroup>
<ListGroupItem onClick={() => alert('Profile clicked!')} active>
Profile
</ListGroupItem>
<ListGroupItem>Settings</ListGroupItem>
<ListGroupItem>Messages</ListGroupItem>
<ListGroupItem>Download</ListGroupItem>
</ListGroup>
</div>
)
}
export default ListButtonCode
List group with icons
Component Code
Copy Code
import { ListGroup, ListGroupItem } from 'flowbite-react'
import {
HiCloudDownload,
HiInbox,
HiOutlineAdjustments,
HiUserCircle,
} from 'react-icons/hi'
const ListIconCode = () => {
return (
<div>
<ListGroup>
<ListGroupItem icon={HiUserCircle} active>
Profile
</ListGroupItem>
<ListGroupItem icon={HiOutlineAdjustments}>Settings</ListGroupItem>
<ListGroupItem icon={HiInbox}>Messages</ListGroupItem>
<ListGroupItem icon={HiCloudDownload}>Download</ListGroupItem>
</ListGroup>
</div>
)
}
export default ListIconCode
API ( List Group )
| Prop | Description | Type | Default |
|---|---|---|---|
href | The URL to link to for this list group item. | '#' | - |
active | Indicates whether the list group item is active. | boolean | false |
disabled | Indicates whether the list group item is disabled. | boolean | false |
onClick | Callback function triggered when the list group item is clicked. | '() => alert("Profile clicked!")' | - |
icon | An optional icon to display alongside the list group item. | 'HiUserCircle' | 'HiInbox' | - |