From 7fa1254fdee130d9f298335bfce40afb7b5076fa Mon Sep 17 00:00:00 2001
From: Dhaval Vira <dhavalveera@gmail.com>
Date: Mon, 29 Apr 2024 17:15:30 +0530
Subject: [PATCH 1/5] fix: added Close Icon for NavbarToggle on Mobile Screen

---
 apps/web/content/docs/components/navbar.mdx   |   6 +
 apps/web/examples/navbar/index.ts             |   1 +
 .../navbar/navbar.withCustomMenuIcon.tsx      | 107 ++++++++++++++++++
 .../src/components/Navbar/Navbar.stories.tsx  |  24 ++++
 .../ui/src/components/Navbar/NavbarToggle.tsx |   7 +-
 5 files changed, 143 insertions(+), 2 deletions(-)
 create mode 100644 apps/web/examples/navbar/navbar.withCustomMenuIcon.tsx

diff --git a/apps/web/content/docs/components/navbar.mdx b/apps/web/content/docs/components/navbar.mdx
index b186babd3..aee36aa16 100644
--- a/apps/web/content/docs/components/navbar.mdx
+++ b/apps/web/content/docs/components/navbar.mdx
@@ -35,6 +35,12 @@ Use this example to feature a dropdown menu when clicking on the user avatar ins
 
 <Example name="navbar.withDropdown" />
 
+## Navbar with Custom Bar/Menu Icon
+
+Use this example to use the custom Open Menu/Bar Icon
+
+<Example name="navbar.withCustomMenuIcon" />
+
 ## Theme
 
 To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).
diff --git a/apps/web/examples/navbar/index.ts b/apps/web/examples/navbar/index.ts
index c06f4cf41..8c8f3732b 100644
--- a/apps/web/examples/navbar/index.ts
+++ b/apps/web/examples/navbar/index.ts
@@ -1,3 +1,4 @@
 export { root } from "./navbar.root";
 export { withCTAButton } from "./navbar.withCTAButton";
+export { withCustomMenuIcon } from "./navbar.withCustomMenuIcon";
 export { withDropdown } from "./navbar.withDropdown";
diff --git a/apps/web/examples/navbar/navbar.withCustomMenuIcon.tsx b/apps/web/examples/navbar/navbar.withCustomMenuIcon.tsx
new file mode 100644
index 000000000..d5bd58e31
--- /dev/null
+++ b/apps/web/examples/navbar/navbar.withCustomMenuIcon.tsx
@@ -0,0 +1,107 @@
+import { Navbar, NavbarBrand, NavbarCollapse, NavbarLink, NavbarToggle } from "flowbite-react";
+import Link from "next/link";
+import { CiMenuFries } from "react-icons/ci";
+import { type CodeData } from "~/components/code-demo";
+
+const code = `
+"use client";
+
+import Link from "next/link";
+import { Navbar } from "flowbite-react";
+
+export function Component() {
+  return (
+    <Navbar fluid rounded>
+      <Navbar.Brand as={Link} href="https://flowbite-react.com">
+        <img src="/favicon.svg" className="mr-3 h-6 sm:h-9" alt="Flowbite React Logo" />
+        <span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite React</span>
+      </Navbar.Brand>
+      <Navbar.Toggle barIcon={CiMenuFries} />
+      <Navbar.Collapse>
+        <Navbar.Link href="#" active>
+          Home
+        </Navbar.Link>
+        <Navbar.Link as={Link} href="#">
+          About
+        </Navbar.Link>
+        <Navbar.Link href="#">Services</Navbar.Link>
+        <Navbar.Link href="#">Pricing</Navbar.Link>
+        <Navbar.Link href="#">Contact</Navbar.Link>
+      </Navbar.Collapse>
+    </Navbar>
+  );
+}
+`;
+
+const codeRSC = `
+import Link from "next/link";
+import { Navbar, NavbarBrand, NavbarCollapse, NavbarLink, NavbarToggle } from "flowbite-react";
+
+export function Component() {
+  return (
+    <Navbar fluid rounded>
+      <NavbarBrand as={Link} href="https://flowbite-react.com">
+        <img src="/favicon.svg" className="mr-3 h-6 sm:h-9" alt="Flowbite React Logo" />
+        <span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite React</span>
+      </NavbarBrand>
+      <NavbarToggle barIcon={CiMenuFries} />
+      <NavbarCollapse>
+        <NavbarLink href="#" active>
+          Home
+        </NavbarLink>
+        <NavbarLink as={Link} href="#">
+          About
+        </NavbarLink>
+        <NavbarLink href="#">Services</NavbarLink>
+        <NavbarLink href="#">Pricing</NavbarLink>
+        <NavbarLink href="#">Contact</NavbarLink>
+      </NavbarCollapse>
+    </Navbar>
+  );
+}
+`;
+
+export function Component() {
+  return (
+    <Navbar fluid rounded>
+      <NavbarBrand as={Link} href="https://flowbite-react.com">
+        <img src="/favicon.svg" className="mr-3 h-6 sm:h-9" alt="Flowbite React Logo" />
+        <span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite React</span>
+      </NavbarBrand>
+      <NavbarToggle barIcon={CiMenuFries} />
+      <NavbarCollapse>
+        <NavbarLink href="#" active>
+          Home
+        </NavbarLink>
+        <NavbarLink as={Link} href="#">
+          About
+        </NavbarLink>
+        <NavbarLink href="#">Services</NavbarLink>
+        <NavbarLink href="#">Pricing</NavbarLink>
+        <NavbarLink href="#">Contact</NavbarLink>
+      </NavbarCollapse>
+    </Navbar>
+  );
+}
+
+export const withCustomMenuIcon: CodeData = {
+  type: "single",
+  code: [
+    {
+      fileName: "client",
+      language: "tsx",
+      code,
+    },
+    {
+      fileName: "server",
+      language: "tsx",
+      code: codeRSC,
+    },
+  ],
+  githubSlug: "navbar/navbar.root.tsx",
+  component: <Component />,
+  iframe: {
+    height: 300,
+    noPadding: true,
+  },
+};
diff --git a/packages/ui/src/components/Navbar/Navbar.stories.tsx b/packages/ui/src/components/Navbar/Navbar.stories.tsx
index 039d8eece..21d3be8dd 100644
--- a/packages/ui/src/components/Navbar/Navbar.stories.tsx
+++ b/packages/ui/src/components/Navbar/Navbar.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryFn } from "@storybook/react";
+import { CiMenuFries } from "react-icons/ci";
 import { Avatar } from "../Avatar";
 import { Button } from "../Button";
 import { Dropdown } from "../Dropdown";
@@ -104,3 +105,26 @@ WithDropdown.args = {
     </>
   ),
 };
+
+export const CustomToggleMenuIconNavbar = Template.bind({});
+CustomToggleMenuIconNavbar.storyName = "Custom Toggle Menu Icon";
+CustomToggleMenuIconNavbar.args = {
+  children: (
+    <>
+      <Navbar.Brand href="https://flowbite.com/">
+        <img src="https://flowbite.com/docs/images/logo.svg" className="mr-3 h-6 sm:h-9" alt="Flowbite Logo" />
+        <span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite</span>
+      </Navbar.Brand>
+      <Navbar.Toggle barIcon={CiMenuFries} />
+      <Navbar.Collapse>
+        <Navbar.Link href="/navbars" active>
+          Home
+        </Navbar.Link>
+        <Navbar.Link href="/navbars">About</Navbar.Link>
+        <Navbar.Link href="/navbars">Services</Navbar.Link>
+        <Navbar.Link href="/navbars">Pricing</Navbar.Link>
+        <Navbar.Link href="/navbars">Contact</Navbar.Link>
+      </Navbar.Collapse>
+    </>
+  ),
+};
diff --git a/packages/ui/src/components/Navbar/NavbarToggle.tsx b/packages/ui/src/components/Navbar/NavbarToggle.tsx
index 3c1b58159..f7e98ccb7 100644
--- a/packages/ui/src/components/Navbar/NavbarToggle.tsx
+++ b/packages/ui/src/components/Navbar/NavbarToggle.tsx
@@ -2,6 +2,7 @@
 
 import type { ComponentProps, FC } from "react";
 import { FaBars } from "react-icons/fa";
+import { IoMdClose } from "react-icons/io";
 import { twMerge } from "tailwind-merge";
 import { mergeDeep } from "../../helpers/merge-deep";
 import type { DeepPartial } from "../../types";
@@ -14,11 +15,13 @@ export interface FlowbiteNavbarToggleTheme {
 
 export interface NavbarToggleProps extends ComponentProps<"button"> {
   barIcon?: FC<ComponentProps<"svg">>;
+  closeIcon?: FC<ComponentProps<"svg">>;
   theme?: DeepPartial<FlowbiteNavbarToggleTheme>;
 }
 
 export const NavbarToggle: FC<NavbarToggleProps> = ({
   barIcon: BarIcon = FaBars,
+  closeIcon: CloseIcon = IoMdClose,
   className,
   theme: customTheme = {},
   ...props
@@ -38,8 +41,8 @@ export const NavbarToggle: FC<NavbarToggleProps> = ({
       className={twMerge(theme.base, className)}
       {...props}
     >
-      <span className="sr-only">Open main menu</span>
-      <BarIcon aria-hidden className={theme.icon} />
+      <span className="sr-only">{isOpen ? "Close" : "Open"} main menu</span>
+      {isOpen ? <CloseIcon aria-hidden className={theme.icon} /> : <BarIcon aria-hidden className={theme.icon} />}
     </button>
   );
 };

From 3fed6d7ad2c910008bbac929610fc3cc3a62b9d2 Mon Sep 17 00:00:00 2001
From: Dhaval Vira <dhavalveera@gmail.com>
Date: Mon, 29 Apr 2024 17:16:57 +0530
Subject: [PATCH 2/5] undo changes

---
 apps/web/content/docs/components/navbar.mdx   |   6 -
 apps/web/examples/navbar/index.ts             |   1 -
 .../navbar/navbar.withCustomMenuIcon.tsx      | 107 ------------------
 .../ui/src/components/Navbar/NavbarToggle.tsx |   7 +-
 4 files changed, 2 insertions(+), 119 deletions(-)
 delete mode 100644 apps/web/examples/navbar/navbar.withCustomMenuIcon.tsx

diff --git a/apps/web/content/docs/components/navbar.mdx b/apps/web/content/docs/components/navbar.mdx
index aee36aa16..b186babd3 100644
--- a/apps/web/content/docs/components/navbar.mdx
+++ b/apps/web/content/docs/components/navbar.mdx
@@ -35,12 +35,6 @@ Use this example to feature a dropdown menu when clicking on the user avatar ins
 
 <Example name="navbar.withDropdown" />
 
-## Navbar with Custom Bar/Menu Icon
-
-Use this example to use the custom Open Menu/Bar Icon
-
-<Example name="navbar.withCustomMenuIcon" />
-
 ## Theme
 
 To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).
diff --git a/apps/web/examples/navbar/index.ts b/apps/web/examples/navbar/index.ts
index 8c8f3732b..c06f4cf41 100644
--- a/apps/web/examples/navbar/index.ts
+++ b/apps/web/examples/navbar/index.ts
@@ -1,4 +1,3 @@
 export { root } from "./navbar.root";
 export { withCTAButton } from "./navbar.withCTAButton";
-export { withCustomMenuIcon } from "./navbar.withCustomMenuIcon";
 export { withDropdown } from "./navbar.withDropdown";
diff --git a/apps/web/examples/navbar/navbar.withCustomMenuIcon.tsx b/apps/web/examples/navbar/navbar.withCustomMenuIcon.tsx
deleted file mode 100644
index d5bd58e31..000000000
--- a/apps/web/examples/navbar/navbar.withCustomMenuIcon.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import { Navbar, NavbarBrand, NavbarCollapse, NavbarLink, NavbarToggle } from "flowbite-react";
-import Link from "next/link";
-import { CiMenuFries } from "react-icons/ci";
-import { type CodeData } from "~/components/code-demo";
-
-const code = `
-"use client";
-
-import Link from "next/link";
-import { Navbar } from "flowbite-react";
-
-export function Component() {
-  return (
-    <Navbar fluid rounded>
-      <Navbar.Brand as={Link} href="https://flowbite-react.com">
-        <img src="/favicon.svg" className="mr-3 h-6 sm:h-9" alt="Flowbite React Logo" />
-        <span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite React</span>
-      </Navbar.Brand>
-      <Navbar.Toggle barIcon={CiMenuFries} />
-      <Navbar.Collapse>
-        <Navbar.Link href="#" active>
-          Home
-        </Navbar.Link>
-        <Navbar.Link as={Link} href="#">
-          About
-        </Navbar.Link>
-        <Navbar.Link href="#">Services</Navbar.Link>
-        <Navbar.Link href="#">Pricing</Navbar.Link>
-        <Navbar.Link href="#">Contact</Navbar.Link>
-      </Navbar.Collapse>
-    </Navbar>
-  );
-}
-`;
-
-const codeRSC = `
-import Link from "next/link";
-import { Navbar, NavbarBrand, NavbarCollapse, NavbarLink, NavbarToggle } from "flowbite-react";
-
-export function Component() {
-  return (
-    <Navbar fluid rounded>
-      <NavbarBrand as={Link} href="https://flowbite-react.com">
-        <img src="/favicon.svg" className="mr-3 h-6 sm:h-9" alt="Flowbite React Logo" />
-        <span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite React</span>
-      </NavbarBrand>
-      <NavbarToggle barIcon={CiMenuFries} />
-      <NavbarCollapse>
-        <NavbarLink href="#" active>
-          Home
-        </NavbarLink>
-        <NavbarLink as={Link} href="#">
-          About
-        </NavbarLink>
-        <NavbarLink href="#">Services</NavbarLink>
-        <NavbarLink href="#">Pricing</NavbarLink>
-        <NavbarLink href="#">Contact</NavbarLink>
-      </NavbarCollapse>
-    </Navbar>
-  );
-}
-`;
-
-export function Component() {
-  return (
-    <Navbar fluid rounded>
-      <NavbarBrand as={Link} href="https://flowbite-react.com">
-        <img src="/favicon.svg" className="mr-3 h-6 sm:h-9" alt="Flowbite React Logo" />
-        <span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite React</span>
-      </NavbarBrand>
-      <NavbarToggle barIcon={CiMenuFries} />
-      <NavbarCollapse>
-        <NavbarLink href="#" active>
-          Home
-        </NavbarLink>
-        <NavbarLink as={Link} href="#">
-          About
-        </NavbarLink>
-        <NavbarLink href="#">Services</NavbarLink>
-        <NavbarLink href="#">Pricing</NavbarLink>
-        <NavbarLink href="#">Contact</NavbarLink>
-      </NavbarCollapse>
-    </Navbar>
-  );
-}
-
-export const withCustomMenuIcon: CodeData = {
-  type: "single",
-  code: [
-    {
-      fileName: "client",
-      language: "tsx",
-      code,
-    },
-    {
-      fileName: "server",
-      language: "tsx",
-      code: codeRSC,
-    },
-  ],
-  githubSlug: "navbar/navbar.root.tsx",
-  component: <Component />,
-  iframe: {
-    height: 300,
-    noPadding: true,
-  },
-};
diff --git a/packages/ui/src/components/Navbar/NavbarToggle.tsx b/packages/ui/src/components/Navbar/NavbarToggle.tsx
index f7e98ccb7..3c1b58159 100644
--- a/packages/ui/src/components/Navbar/NavbarToggle.tsx
+++ b/packages/ui/src/components/Navbar/NavbarToggle.tsx
@@ -2,7 +2,6 @@
 
 import type { ComponentProps, FC } from "react";
 import { FaBars } from "react-icons/fa";
-import { IoMdClose } from "react-icons/io";
 import { twMerge } from "tailwind-merge";
 import { mergeDeep } from "../../helpers/merge-deep";
 import type { DeepPartial } from "../../types";
@@ -15,13 +14,11 @@ export interface FlowbiteNavbarToggleTheme {
 
 export interface NavbarToggleProps extends ComponentProps<"button"> {
   barIcon?: FC<ComponentProps<"svg">>;
-  closeIcon?: FC<ComponentProps<"svg">>;
   theme?: DeepPartial<FlowbiteNavbarToggleTheme>;
 }
 
 export const NavbarToggle: FC<NavbarToggleProps> = ({
   barIcon: BarIcon = FaBars,
-  closeIcon: CloseIcon = IoMdClose,
   className,
   theme: customTheme = {},
   ...props
@@ -41,8 +38,8 @@ export const NavbarToggle: FC<NavbarToggleProps> = ({
       className={twMerge(theme.base, className)}
       {...props}
     >
-      <span className="sr-only">{isOpen ? "Close" : "Open"} main menu</span>
-      {isOpen ? <CloseIcon aria-hidden className={theme.icon} /> : <BarIcon aria-hidden className={theme.icon} />}
+      <span className="sr-only">Open main menu</span>
+      <BarIcon aria-hidden className={theme.icon} />
     </button>
   );
 };

From 29e5f19c50cdb23de4db8b7814757ee1761ffccd Mon Sep 17 00:00:00 2001
From: Dhaval Vira <dhavalveera@gmail.com>
Date: Mon, 29 Apr 2024 17:17:12 +0530
Subject: [PATCH 3/5] undo changes

---
 .../src/components/Navbar/Navbar.stories.tsx  | 24 -------------------
 1 file changed, 24 deletions(-)

diff --git a/packages/ui/src/components/Navbar/Navbar.stories.tsx b/packages/ui/src/components/Navbar/Navbar.stories.tsx
index 21d3be8dd..039d8eece 100644
--- a/packages/ui/src/components/Navbar/Navbar.stories.tsx
+++ b/packages/ui/src/components/Navbar/Navbar.stories.tsx
@@ -1,5 +1,4 @@
 import type { Meta, StoryFn } from "@storybook/react";
-import { CiMenuFries } from "react-icons/ci";
 import { Avatar } from "../Avatar";
 import { Button } from "../Button";
 import { Dropdown } from "../Dropdown";
@@ -105,26 +104,3 @@ WithDropdown.args = {
     </>
   ),
 };
-
-export const CustomToggleMenuIconNavbar = Template.bind({});
-CustomToggleMenuIconNavbar.storyName = "Custom Toggle Menu Icon";
-CustomToggleMenuIconNavbar.args = {
-  children: (
-    <>
-      <Navbar.Brand href="https://flowbite.com/">
-        <img src="https://flowbite.com/docs/images/logo.svg" className="mr-3 h-6 sm:h-9" alt="Flowbite Logo" />
-        <span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite</span>
-      </Navbar.Brand>
-      <Navbar.Toggle barIcon={CiMenuFries} />
-      <Navbar.Collapse>
-        <Navbar.Link href="/navbars" active>
-          Home
-        </Navbar.Link>
-        <Navbar.Link href="/navbars">About</Navbar.Link>
-        <Navbar.Link href="/navbars">Services</Navbar.Link>
-        <Navbar.Link href="/navbars">Pricing</Navbar.Link>
-        <Navbar.Link href="/navbars">Contact</Navbar.Link>
-      </Navbar.Collapse>
-    </>
-  ),
-};

From 3d0fba538dc514ea7feb382ad25c9b605735c9c7 Mon Sep 17 00:00:00 2001
From: Dhaval Vira <dhavalveera@gmail.com>
Date: Tue, 30 Apr 2024 15:08:33 +0530
Subject: [PATCH 4/5] feat/Tabs - Vertical Tabs added

---
 apps/web/content/docs/components/tabs.mdx     |  6 ++
 apps/web/examples/tabs/index.ts               |  1 +
 apps/web/examples/tabs/tabs.vertical.tsx      | 63 +++++++++++++++++++
 .../ui/src/components/Tabs/Tabs.stories.tsx   | 18 +++++-
 packages/ui/src/components/Tabs/Tabs.tsx      |  3 +-
 packages/ui/src/components/Tabs/theme.ts      | 12 +++-
 6 files changed, 100 insertions(+), 3 deletions(-)
 create mode 100644 apps/web/examples/tabs/tabs.vertical.tsx

diff --git a/apps/web/content/docs/components/tabs.mdx b/apps/web/content/docs/components/tabs.mdx
index dec1526e6..352bbf33e 100644
--- a/apps/web/content/docs/components/tabs.mdx
+++ b/apps/web/content/docs/components/tabs.mdx
@@ -53,6 +53,12 @@ Here's an example on how you can set the activate tab programatically using the
 
 <Example name="tabs.stateOptions" />
 
+## Vertical Tabs
+
+Use this example to show a vertically aligned set of tabs on the left side of the page.
+
+<Example name="tabs.vertical" />
+
 ## Theme
 
 To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).
diff --git a/apps/web/examples/tabs/index.ts b/apps/web/examples/tabs/index.ts
index a769dc770..62e7a9b09 100644
--- a/apps/web/examples/tabs/index.ts
+++ b/apps/web/examples/tabs/index.ts
@@ -1,6 +1,7 @@
 export { fullWidth } from "./tabs.fullWidth";
 export { root } from "./tabs.root";
 export { stateOptions } from "./tabs.stateOptions";
+export { vertical } from "./tabs.vertical";
 export { withIcons } from "./tabs.withIcons";
 export { withPills } from "./tabs.withPills";
 export { withUnderline } from "./tabs.withUnderline";
diff --git a/apps/web/examples/tabs/tabs.vertical.tsx b/apps/web/examples/tabs/tabs.vertical.tsx
new file mode 100644
index 000000000..e7299033e
--- /dev/null
+++ b/apps/web/examples/tabs/tabs.vertical.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import { Tabs } from "flowbite-react";
+import { type CodeData } from "~/components/code-demo";
+
+const code = `
+import { Tabs } from "flowbite-react";
+
+export function Component() {
+  return (
+    <Tabs aria-label="Pills" style="vertical">
+      <Tabs.Item active title="Tab 1">
+        <p className="text-sm text-gray-500 dark:text-gray-400">Content 1</p>
+      </Tabs.Item>
+      <Tabs.Item title="Tab 2">
+        <p className="text-sm text-gray-500 dark:text-gray-400">Content 2</p>
+      </Tabs.Item>
+      <Tabs.Item title="Tab 3">
+        <p className="text-sm text-gray-500 dark:text-gray-400">Content 3</p>
+      </Tabs.Item>
+      <Tabs.Item title="Tab 4">
+        <p className="text-sm text-gray-500 dark:text-gray-400">Content 4</p>
+      </Tabs.Item>
+      <Tabs.Item disabled title="Tab 5">
+        <p className="text-sm text-gray-500 dark:text-gray-400">Content 5</p>
+      </Tabs.Item>
+    </Tabs>
+  );
+}
+`;
+
+export function Component() {
+  return (
+    <Tabs aria-label="Pills" style="vertical">
+      <Tabs.Item active title="Tab 1">
+        <p className="text-sm text-gray-500 dark:text-gray-400">Content 1</p>
+      </Tabs.Item>
+      <Tabs.Item title="Tab 2">
+        <p className="text-sm text-gray-500 dark:text-gray-400">Content 2</p>
+      </Tabs.Item>
+      <Tabs.Item title="Tab 3">
+        <p className="text-sm text-gray-500 dark:text-gray-400">Content 3</p>
+      </Tabs.Item>
+      <Tabs.Item title="Tab 4">
+        <p className="text-sm text-gray-500 dark:text-gray-400">Content 4</p>
+      </Tabs.Item>
+      <Tabs.Item disabled title="Tab 5">
+        <p className="text-sm text-gray-500 dark:text-gray-400">Content 5</p>
+      </Tabs.Item>
+    </Tabs>
+  );
+}
+
+export const vertical: CodeData = {
+  type: "single",
+  code: {
+    fileName: "client",
+    language: "tsx",
+    code,
+  },
+  githubSlug: "tabs/tabs.vertical.tsx",
+  component: <Component />,
+};
diff --git a/packages/ui/src/components/Tabs/Tabs.stories.tsx b/packages/ui/src/components/Tabs/Tabs.stories.tsx
index 8eab80b74..c73f6ac91 100644
--- a/packages/ui/src/components/Tabs/Tabs.stories.tsx
+++ b/packages/ui/src/components/Tabs/Tabs.stories.tsx
@@ -16,7 +16,7 @@ export default {
     },
     style: {
       control: "radio",
-      options: ["default", "underline", "pills", "fullWidth"],
+      options: ["default", "underline", "pills", "fullWidth", "vertical"],
     },
   },
 } as Meta;
@@ -103,3 +103,19 @@ FullWidth.args = {
   style: "fullWidth",
 };
 FullWidth.storyName = "Full width";
+
+export const Vertical = (args: TabsProps): JSX.Element => (
+  <Tabs {...args}>
+    <Tabs.Item title="Profile">Profile content</Tabs.Item>
+    <Tabs.Item title="Dashboard">Dashboard content</Tabs.Item>
+    <Tabs.Item title="Settings">Settings content</Tabs.Item>
+    <Tabs.Item title="Contacts">Contacts content</Tabs.Item>
+    <Tabs.Item disabled title="Disabled">
+      Disabled content
+    </Tabs.Item>
+  </Tabs>
+);
+Vertical.args = {
+  style: "vertical",
+};
+Vertical.storyName = "Vertical Tabs";
diff --git a/packages/ui/src/components/Tabs/Tabs.tsx b/packages/ui/src/components/Tabs/Tabs.tsx
index fb61a450c..ceeac4542 100644
--- a/packages/ui/src/components/Tabs/Tabs.tsx
+++ b/packages/ui/src/components/Tabs/Tabs.tsx
@@ -33,6 +33,7 @@ export interface TabStyles {
   fullWidth: string;
   pills: string;
   underline: string;
+  vertical: string;
 }
 
 export interface TabStyleItemProps {
@@ -126,7 +127,7 @@ const TabsComponent = forwardRef<TabsRef, TabsProps>(
     }));
 
     return (
-      <div className={twMerge(theme.base, className)}>
+      <div className={twMerge(theme.base, className)} data-tab-style={style}>
         <div
           aria-label="Tabs"
           role="tablist"
diff --git a/packages/ui/src/components/Tabs/theme.ts b/packages/ui/src/components/Tabs/theme.ts
index 6464230c4..7c217dfaf 100644
--- a/packages/ui/src/components/Tabs/theme.ts
+++ b/packages/ui/src/components/Tabs/theme.ts
@@ -2,7 +2,7 @@ import { createTheme } from "../../helpers/create-theme";
 import type { FlowbiteTabsTheme } from "./Tabs";
 
 export const tabTheme: FlowbiteTabsTheme = createTheme({
-  base: "flex flex-col gap-2",
+  base: "flex flex-col gap-2 data-[tab-style=vertical]:flex-col md:data-[tab-style=vertical]:flex-row",
   tablist: {
     base: "flex text-center",
     styles: {
@@ -11,6 +11,8 @@ export const tabTheme: FlowbiteTabsTheme = createTheme({
       pills: "flex-wrap space-x-2 text-sm font-medium text-gray-500 dark:text-gray-400",
       fullWidth:
         "grid w-full grid-flow-col divide-x divide-gray-200 rounded-none text-sm font-medium shadow dark:divide-gray-700 dark:text-gray-400",
+      vertical:
+        "mb-4 flex w-full flex-col space-y-4 text-sm font-medium text-gray-500 dark:text-gray-400 md:mb-0 md:me-4 md:w-fit",
     },
     tabitem: {
       base: "flex items-center justify-center rounded-t-lg p-4 text-sm font-medium first:ml-0 focus:outline-none focus:ring-4 focus:ring-cyan-300 disabled:cursor-not-allowed disabled:text-gray-400 disabled:dark:text-gray-500",
@@ -43,6 +45,13 @@ export const tabTheme: FlowbiteTabsTheme = createTheme({
             off: "rounded-none bg-white hover:bg-gray-50 hover:text-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700 dark:hover:text-white",
           },
         },
+        vertical: {
+          base: "",
+          active: {
+            on: "inline-flex w-full items-center rounded-lg bg-cyan-600 px-4 py-3 text-white",
+            off: "inline-flex w-full items-center rounded-lg px-4 py-3 hover:bg-gray-100 hover:text-gray-900 dark:bg-gray-800 dark:hover:bg-gray-700 dark:hover:text-white",
+          },
+        },
       },
       icon: "mr-2 h-5 w-5",
     },
@@ -54,6 +63,7 @@ export const tabTheme: FlowbiteTabsTheme = createTheme({
       underline: "",
       pills: "",
       fullWidth: "",
+      vertical: "",
     },
   },
   tabpanel: "py-3",

From 26c414e94af01752d5d33d08fd2185f4759eac05 Mon Sep 17 00:00:00 2001
From: Dhaval Vira <dhavalveera@gmail.com>
Date: Tue, 30 Apr 2024 15:22:52 +0530
Subject: [PATCH 5/5] small fix

---
 apps/web/examples/tabs/tabs.vertical.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/examples/tabs/tabs.vertical.tsx b/apps/web/examples/tabs/tabs.vertical.tsx
index e7299033e..153bbe70b 100644
--- a/apps/web/examples/tabs/tabs.vertical.tsx
+++ b/apps/web/examples/tabs/tabs.vertical.tsx
@@ -8,7 +8,7 @@ import { Tabs } from "flowbite-react";
 
 export function Component() {
   return (
-    <Tabs aria-label="Pills" style="vertical">
+    <Tabs aria-label="Vertical" style="vertical">
       <Tabs.Item active title="Tab 1">
         <p className="text-sm text-gray-500 dark:text-gray-400">Content 1</p>
       </Tabs.Item>
@@ -31,7 +31,7 @@ export function Component() {
 
 export function Component() {
   return (
-    <Tabs aria-label="Pills" style="vertical">
+    <Tabs aria-label="Vertical" style="vertical">
       <Tabs.Item active title="Tab 1">
         <p className="text-sm text-gray-500 dark:text-gray-400">Content 1</p>
       </Tabs.Item>