diff --git a/content/docs/typography/list.mdx b/content/docs/typography/list.mdx
index b9ae21e67..88dd2d226 100644
--- a/content/docs/typography/list.mdx
+++ b/content/docs/typography/list.mdx
@@ -35,6 +35,12 @@ Use the `ordered` prop tag to create an ordered list of items with numbers.
+## Horizontal list
+
+Use this example to create a horizontally aligned list of items.
+
+
+
## Theme
To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).
diff --git a/examples/list/index.ts b/examples/list/index.ts
index e28b6b5c3..722aed02f 100644
--- a/examples/list/index.ts
+++ b/examples/list/index.ts
@@ -2,3 +2,4 @@ export { nested } from './list.nested';
export { ordered } from './list.ordered';
export { root } from './list.root';
export { unstyled } from './list.unstyled';
+export { horizontal } from './list.horizontal';
diff --git a/examples/list/list.horizontal.tsx b/examples/list/list.horizontal.tsx
new file mode 100644
index 000000000..1ea4c8f0e
--- /dev/null
+++ b/examples/list/list.horizontal.tsx
@@ -0,0 +1,72 @@
+import { type CodeData } from '~/components/code-demo';
+import { List, ListItem } from '~/src';
+
+const code = `
+'use client';
+
+import { List } from 'flowbite-react';
+
+function Component() {
+ return (
+
+ About
+ Premium
+ Campaigns
+ Blog
+ Affiliate Program
+ FAQs
+ Contact
+
+ );
+}
+`;
+
+const codeRSC = `
+import { List, ListItem } from 'flowbite-react';
+
+function Component() {
+ return (
+
+ About
+ Premium
+ Campaigns
+ Blog
+ Affiliate Program
+ FAQs
+ Contact
+
+ );
+}
+`;
+
+function Component() {
+ return (
+
+ About
+ Premium
+ Campaigns
+ Blog
+ Affiliate Program
+ FAQs
+ Contact
+
+ );
+}
+
+export const horizontal: CodeData = {
+ type: 'single',
+ code: [
+ {
+ fileName: 'client',
+ language: 'tsx',
+ code,
+ },
+ {
+ fileName: 'server',
+ language: 'tsx',
+ code: codeRSC,
+ },
+ ],
+ githubSlug: 'list/list.horizontal.tsx',
+ component: ,
+};
diff --git a/src/components/List/List.tsx b/src/components/List/List.tsx
index 35e2ea0b2..6a05641f1 100644
--- a/src/components/List/List.tsx
+++ b/src/components/List/List.tsx
@@ -16,6 +16,7 @@ export interface FlowbiteListRootTheme {
on: string;
off: string;
};
+ horizontal: string;
unstyled: string;
nested: string;
}
@@ -30,6 +31,7 @@ export interface ListProps extends PropsWithChildren & Comp
ordered?: boolean;
unstyled?: boolean;
nested?: boolean;
+ horizontal?: boolean;
}
const ListComponent: FC = ({
@@ -38,6 +40,7 @@ const ListComponent: FC = ({
unstyled,
nested,
ordered,
+ horizontal,
theme: customTheme = {},
...props
}) => {
@@ -47,10 +50,11 @@ const ListComponent: FC = ({
return (