diff --git a/packages/components/src/TabContainer.tsx b/packages/components/src/TabContainer.tsx
new file mode 100644
index 000000000..0bdc3f5e9
--- /dev/null
+++ b/packages/components/src/TabContainer.tsx
@@ -0,0 +1,65 @@
+import { ActionButton, ActionButtonProps } from "ActionButton";
+import clsx from "clsx";
+import { useState } from "react";
+import { twMerge } from "tailwind-merge";
+
+type TabContainerProps = {
+ id: string;
+ title: string;
+ tabs: Array<{
+ title: React.ReactNode;
+ children: React.ReactNode;
+ }>;
+} & ActionButtonProps<"button">;
+
+export const TabContainer = ({
+ id,
+ title,
+ tabs,
+ ...buttonProps
+}: TabContainerProps): JSX.Element => {
+ const [activeTabIndex, setActiveTabIndex] = useState(0);
+
+ return (
+
+
+ {tabs.map((tab, index) => (
+
setActiveTabIndex(index)}
+ size="md"
+ backgroundColor="rblack"
+ textHoverColor="white"
+ {...buttonProps}
+ className={twMerge(
+ clsx("text-white py-4", {
+ "opacity-50": activeTabIndex !== index,
+ }),
+ buttonProps.className
+ )}
+ >
+ {tab.title}
+
+ ))}
+
+
+ {/* Tab Panel */}
+ {tabs.map((tab, index) => (
+
+ {tab.children}
+
+ ))}
+
+ );
+};
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 06bd74cec..b34e8efdf 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -35,6 +35,7 @@ export * from "./StyledSelectBox";
export * from "./StyledTable";
export * from "./StyledTableHead";
export * from "./StyledTableRow";
+export * from "./TabContainer";
export * from "./Text";
export * from "./TickedRadioList";
export * from "./ToggleButton";
diff --git a/storybook/src/stories/TabContainer.stories.tsx b/storybook/src/stories/TabContainer.stories.tsx
new file mode 100644
index 000000000..028c14089
--- /dev/null
+++ b/storybook/src/stories/TabContainer.stories.tsx
@@ -0,0 +1,63 @@
+import { TabContainer } from "@namada/components";
+import { Meta, Story } from "@storybook/react";
+
+export default {
+ title: "Components/TabContainer",
+ component: TabContainer,
+} as Meta;
+
+// Template for generating stories
+const Template: Story = (args) => ;
+
+// Default story with 3 tabs
+export const Default = Template.bind({});
+Default.args = {
+ tabs: [
+ {
+ title: "Tab 1",
+ children: This is the content of Tab 1
,
+ },
+ {
+ title: "Tab 2",
+ children: This is the content of Tab 2
,
+ },
+ {
+ title: "Tab 3",
+ children: This is the content of Tab 3
,
+ },
+ ],
+};
+
+// Story with different tab content
+export const CustomTabs = Template.bind({});
+CustomTabs.args = {
+ tabs: [
+ {
+ title: "Introduction",
+ children: Welcome to the introduction content
,
+ },
+ {
+ title: "Overview",
+ children: Here is an overview of the content
,
+ },
+ {
+ title: "Details",
+ children: This is where the details are explained
,
+ },
+ ],
+};
+
+// Story with only two tabs
+export const TwoTabs = Template.bind({});
+TwoTabs.args = {
+ tabs: [
+ {
+ title: "First Tab",
+ children: Content for the first tab
,
+ },
+ {
+ title: "Second Tab",
+ children: Content for the second tab
,
+ },
+ ],
+};