diff --git a/src/components/ListGroup.tsx b/src/components/ListGroup.tsx
deleted file mode 100644
index da7a6bd84..000000000
--- a/src/components/ListGroup.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { ComponentProps, FC, Fragment, ReactNode } from 'react';
-import classNames from 'classnames';
-
-export type ListGroupProps = {
-  items: ListGroupItem[];
-};
-export type ListGroupItem = {
-  title: ReactNode;
-  link?: string;
-  icon?: FC<ComponentProps<'svg'>>;
-  active?: boolean;
-  onClick?: () => void;
-  disabled?: boolean;
-};
-
-export const ListGroup: FC<ListGroupProps> = ({ items }) => {
-  return (
-    <div className="w-48 list-none divide-y divide-gray-200 rounded-lg border border-gray-200 bg-white text-sm font-medium text-gray-900 dark:divide-gray-600 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
-      {items.map((item, index) => (
-        <Fragment key={index}>
-          {!item.link ? (
-            <button
-              onClick={item.onClick}
-              className={classNames(
-                'flex w-full items-center gap-2 py-2 px-4 text-left text-sm font-medium first:rounded-t-lg last:rounded-b-lg',
-                {
-                  '!bg-blue-700 text-white': item.active,
-                  'hover:bg-gray-100 hover:text-blue-700 dark:hover:bg-gray-600 dark:hover:text-white': !item.active,
-                },
-              )}
-              type="button"
-            >
-              {item.icon && <item.icon />}
-              {item.title}
-            </button>
-          ) : (
-            <a
-              href={item.link}
-              aria-current="false"
-              className={classNames(
-                'block w-full cursor-pointer py-2 px-4 first:rounded-t-lg last:rounded-b-lg focus:outline-none dark:bg-gray-800',
-                {
-                  '!bg-blue-700 text-white': item.active,
-                  'hover:bg-gray-100 hover:text-blue-700 dark:hover:bg-gray-600 dark:hover:text-white': !item.active,
-                },
-              )}
-            >
-              {item.title}
-            </a>
-          )}
-        </Fragment>
-      ))}
-    </div>
-  );
-};
diff --git a/src/components/index.ts b/src/components/index.ts
index c6881b44b..27e7a2016 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -9,6 +9,7 @@ export * from './Carousel';
 export * from './dropdown/Dropdown';
 export * from './DarkThemeToggle';
 export * from './form-controls';
+export * from './list-group/ListGroup';
 export * from './Navbar';
 export * from './Sidebar';
 export * from './Spinner';
diff --git a/src/components/list-group/ListGroup.tsx b/src/components/list-group/ListGroup.tsx
new file mode 100644
index 000000000..7b00ed3df
--- /dev/null
+++ b/src/components/list-group/ListGroup.tsx
@@ -0,0 +1,23 @@
+import { FC } from 'react';
+import classNames from 'classnames';
+
+import { ListGroupItem } from './ListGroupItem';
+
+export type ListGroupProps = {
+  className?: string;
+};
+
+const ListGroupComponent: FC<ListGroupProps> = ({ children, className }) => (
+  <div
+    className={classNames(
+      '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',
+      className,
+    )}
+  >
+    {children}
+  </div>
+);
+
+ListGroupItem.displayName = 'ListGroup.Item';
+
+export const ListGroup = Object.assign(ListGroupComponent, { Item: ListGroupItem });
diff --git a/src/components/list-group/ListGroupItem.tsx b/src/components/list-group/ListGroupItem.tsx
new file mode 100644
index 000000000..5554ae678
--- /dev/null
+++ b/src/components/list-group/ListGroupItem.tsx
@@ -0,0 +1,41 @@
+import { ComponentProps, FC, PropsWithChildren } from 'react';
+import classNames from 'classnames';
+
+export type ListGroupItemProps = {
+  className?: string;
+  href?: string;
+  icon?: FC<ComponentProps<'svg'>>;
+  active?: boolean;
+  onClick?: () => void;
+  disabled?: boolean;
+};
+
+export const ListGroupItem: FC<ListGroupItemProps> = ({ children, className, href, onClick, active, icon: Icon }) => {
+  const Wrapper = ({ children, className }: PropsWithChildren<{ className?: string }>) =>
+    !href ? (
+      <button className={classNames('text-left', className)} onClick={onClick} type="button">
+        {children}
+      </button>
+    ) : (
+      <a className={className} href={href}>
+        {children}
+      </a>
+    );
+
+  return (
+    <Wrapper
+      className={classNames(
+        'flex w-full cursor-pointer border-b border-gray-200 py-2 px-4 first:rounded-t-lg last:rounded-b-lg last:border-b-0 dark:border-gray-600',
+        {
+          'bg-blue-700 text-white dark:bg-gray-800': active,
+          'hover:bg-gray-100 hover:text-blue-700 focus:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:hover:text-white dark:focus:text-white dark:focus:ring-gray-500':
+            !active,
+        },
+        className,
+      )}
+    >
+      {Icon && <Icon className="mr-2 h-4 w-4 fill-current" />}
+      {children}
+    </Wrapper>
+  );
+};
diff --git a/src/pages/ListGroupPage.tsx b/src/pages/ListGroupPage.tsx
index 962412f13..6999facca 100644
--- a/src/pages/ListGroupPage.tsx
+++ b/src/pages/ListGroupPage.tsx
@@ -1,84 +1,64 @@
 import { FC } from 'react';
-import { ListGroup, ListGroupItem } from '../components/ListGroup';
-import { CodeExample, DemoPage } from './DemoPage';
 import { HiCloudDownload, HiInbox, HiOutlineAdjustments, HiUserCircle } from 'react-icons/hi';
 
-const ListGroupPage: FC = () => {
-  const defaultItems: ListGroupItem[] = [
-    {
-      title: 'Profile',
-    },
-    {
-      title: 'Settings',
-    },
-    {
-      title: 'Messages',
-    },
-    {
-      title: 'Download',
-    },
-  ];
-
-  const itemsWithLinks: ListGroupItem[] = [
-    {
-      title: 'Profile',
-      link: '#/list-group',
-      active: true,
-    },
-    {
-      title: 'Settings',
-      link: '#/list-group',
-    },
-    {
-      title: 'Messages',
-      link: '#/list-group',
-    },
-    {
-      title: 'Download',
-      link: '#/list-group',
-    },
-  ];
-
-  const itemsWithIcons: ListGroupItem[] = [
-    {
-      title: 'Profile',
-      icon: HiUserCircle,
-      onClick: () => alert('profile'),
-    },
-    {
-      title: 'Settings',
-      icon: HiOutlineAdjustments,
-    },
-    {
-      title: 'Messages',
-      icon: HiInbox,
-    },
-    {
-      title: 'Download',
-      icon: HiCloudDownload,
-    },
-  ];
+import { ListGroup } from '../components';
+import { CodeExample, DemoPage } from './DemoPage';
 
+const ListGroupPage: FC = () => {
   const examples: CodeExample[] = [
     {
       title: 'Default list',
-      code: <ListGroup items={defaultItems} />,
+      code: (
+        <ListGroup className="w-48">
+          <ListGroup.Item>Profile</ListGroup.Item>
+          <ListGroup.Item>Settings</ListGroup.Item>
+          <ListGroup.Item>Messages</ListGroup.Item>
+          <ListGroup.Item>Download</ListGroup.Item>
+        </ListGroup>
+      ),
     },
     {
       title: 'List group with links',
-      code: <ListGroup items={itemsWithLinks} />,
+      code: (
+        <ListGroup className="w-48">
+          <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>
+      ),
     },
     {
       title: 'List group with buttons',
-      code: <ListGroup items={itemsWithLinks} />,
-    },
-    {
-      title: 'List group with icons',
-      code: <ListGroup items={itemsWithIcons} />,
+      code: (
+        <ListGroup className="w-48">
+          <ListGroup.Item active onClick={() => alert('Profile clicked!')}>
+            Profile
+          </ListGroup.Item>
+          <ListGroup.Item>Settings</ListGroup.Item>
+          <ListGroup.Item>Messages</ListGroup.Item>
+          <ListGroup.Item>Download</ListGroup.Item>
+        </ListGroup>
+      ),
       codeStringifierOptions: {
         functionValue: (fn) => (fn.name === 'onClick' ? fn : fn.name),
       },
     },
+    {
+      title: 'List group with icons',
+      code: (
+        <ListGroup className="w-48">
+          <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>
+      ),
+    },
   ];
 
   return <DemoPage examples={examples} />;