diff --git a/src/app/(components)/styles/page.tsx b/src/app/(components)/styles/page.tsx
index a5cb65a..2f6330a 100644
--- a/src/app/(components)/styles/page.tsx
+++ b/src/app/(components)/styles/page.tsx
@@ -10,8 +10,8 @@ export default function Page() {
         items={[
           { id: "box", label: "Box" },
           { id: "gradients", label: "Gradientes" },
-            { id: "scale-hover", label: "Escala al pasar el cursor" },
-            { id: "hover-bg", label: "Color de fondo al pasar el cursor" },
+          { id: "scale-hover", label: "Escala al pasar el cursor" },
+          { id: "hover-bg", label: "Color de fondo al pasar el cursor" },
         ]}
       />
       <div className="my-5">
@@ -44,6 +44,36 @@ export default function Page() {
           </div>
         </VistaComponente>
 
+        <VistaComponente
+          id="box"
+          title="Estilo: Box activado"
+          description="El estilo normal de la caja se puede activar con la clase <code>.active</code> para resaltar un elemento seleccionado o activo."
+          code={`<div className="box active">
+  <h1><code>div</code> con className <code>.box</code></h1>
+</div>`}
+        >
+          <div className="box active mb-3">
+            <h1 className="mb-0">
+              <code>div</code> con className <code>.box</code> <code>.active</code>
+            </h1>
+          </div>
+        </VistaComponente>
+
+        <VistaComponente
+          id="box"
+          title="Estilo: Box desactivado"
+          description="El estilo normal de la caja se puede desactivar con la clase <code>.disabled</code> para indicar que un elemento no está disponible o no se puede seleccionar."
+          code={`<div className="box disabled">
+  <h1><code>div</code> con className <code>.box</code></h1>
+</div>`}
+        >
+          <div className="box disabled mb-3">
+            <h1 className="mb-0">
+              <code>div</code> con className <code>.box</code> <code>.disabled</code>
+            </h1>
+          </div>
+        </VistaComponente>
+
         <VistaComponente
           id="gradients"
           title="Estilo: bg-gradient"
diff --git a/src/app/(components)/tabs/page.tsx b/src/app/(components)/tabs/page.tsx
new file mode 100644
index 0000000..c6df03d
--- /dev/null
+++ b/src/app/(components)/tabs/page.tsx
@@ -0,0 +1,220 @@
+"use client";
+
+import { CodeBlock } from "@/components/code-block";
+import IndiceContenido from "@/components/content-index";
+import Tabs from "@/components/tabs";
+import VistaComponente from "@/components/vista-componente";
+
+export default function Page() {
+  return (
+    <>
+      <IndiceContenido
+        items={[
+          { id: "tabs-basico", label: "Pestañas básicas" },
+          { id: "tabs-desactivadas", label: "Pestañas desactivadas" },
+          { id: "tabs-estilos", label: "Estilos del componente" },
+          { id: "tabs-props", label: "Props del componente" },
+        ]}
+      />
+
+      <div className="my-5">
+        <h1 className="mb-4 display-5">
+          🧩 Componente: <code>Tabs</code>
+        </h1>
+
+        <p className="mb-4 text-muted">
+          El componente <code>&lt;Tabs /&gt;</code> permite organizar contenido
+          en pestañas, ofreciendo opciones de estilos y soporte para pestañas
+          desactivadas.
+          <br />
+          El tiempo de animacion de las pestañas es de 0.3s. pero se puede
+          modificar en el archivo <code>src/styles/sass/_tabs.scss</code>
+        </p>
+
+        <CodeBlock code={`import Tabs from "@/components/tabs";`} />
+
+        <hr className="my-5" />
+
+        <VistaComponente
+          id="tabs-basico"
+          title="📌 Pestañas básicas"
+          description="Un conjunto de pestañas funcionales para organizar contenido."
+          code={`<Tabs
+  tabs=[
+    { id: "home", title: "Inicio", content: <p>Contenido de inicio</p> },
+    { id: "profile", title: "Perfil", content: <p>Contenido del perfil</p> },
+    { id: "settings", title: "Configuraciones", content: <p>Contenido de configuraciones</p> },
+  ]
+/>`}
+        >
+          <Tabs
+            tabs={[
+              {
+                id: "home-1",
+                title: "Inicio",
+                content: <p>Contenido de inicio</p>,
+              },
+              {
+                id: "profile-1",
+                title: "Perfil",
+                content: <p>Contenido del perfil</p>,
+              },
+              {
+                id: "settings-1",
+                title: "Configuraciones",
+                content: <p>Contenido de configuraciones</p>,
+              },
+            ]}
+          />
+        </VistaComponente>
+
+        <VistaComponente
+          id="tabs-desactivadas"
+          title="🚫 Pestañas desactivadas"
+          description="Puedes desactivar pestañas para evitar que sean seleccionadas."
+          code={`<Tabs
+  tabs=[
+    { id: "home", title: "Inicio", content: <p>Contenido de inicio</p> },
+    { id: "disabled", title: "Desactivado", content: <p>No seleccionable</p>, disabled: true },
+  ]
+/>`}
+        >
+          <Tabs
+            tabs={[
+              {
+                id: "home-2",
+                title: "Inicio",
+                content: <p>Contenido de inicio</p>,
+              },
+              {
+                id: "disabled-2",
+                title: "Desactivado",
+                content: <p>No seleccionable</p>,
+                disabled: true,
+              },
+            ]}
+          />
+        </VistaComponente>
+
+        <VistaComponente
+          id="tabs-estilos"
+          title="🎨 Estilos del componente"
+          description="El componente admite diferentes estilos, como el diseño en cajas."
+          code={`<Tabs
+  tabs=[
+    { id: "home", title: "Inicio", content: <p>Contenido de inicio</p> },
+    { id: "profile", title: "Perfil", content: <p>Contenido del perfil</p> },
+  ]
+  style="box"
+/>`}
+        >
+          <Tabs
+            style="box"
+            tabs={[
+              {
+                id: "home-3",
+                title: "Inicio",
+                content: <p>Contenido de inicio</p>,
+              },
+              {
+                id: "profile-3",
+                title: "Perfil",
+                content: <p>Contenido del perfil</p>,
+              },
+              {
+                id: "settings-3",
+                title: "Configuraciones",
+                content: <p>Contenido del perfil</p>,
+                disabled: true,
+              },
+            ]}
+          />
+        </VistaComponente>
+
+        {/* PROPS */}
+        <section className="mb-5" id="tabs-props">
+          <h2 className="h5 mb-3">⚙️ Props del componente</h2>
+          <table className="table table-bordered table-striped align-middle">
+            <thead>
+              <tr>
+                <th scope="col">Prop</th>
+                <th scope="col">Tipo</th>
+                <th scope="col">Descripción</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>
+                  <code>tabs</code>
+                </td>
+                <td>
+                  <code>Tab[]</code>
+                </td>
+                <td>Lista de pestañas con ID, título y contenido.</td>
+              </tr>
+              <tr>
+                <td>
+                  <code>style?</code>
+                </td>
+                <td>
+                  <code>&quot;default&quot; | &quot;box&quot;</code>
+                </td>
+                <td>Estilo de las pestañas.</td>
+              </tr>
+              <tr>
+                <td>
+                  <code>className?</code>
+                </td>
+                <td>
+                  <code>
+                    {"{ container?: string; tab?: string; content?: string; }"}
+                  </code>
+                </td>
+                <td>
+                  Clases CSS personalizables para diferentes partes del
+                  componente.
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <code>Tab.id</code>
+                </td>
+                <td>
+                  <code>string</code>
+                </td>
+                <td>Identificador único de la pestaña.</td>
+              </tr>
+              <tr>
+                <td>
+                  <code>Tab.title</code>
+                </td>
+                <td>
+                  <code>string | JSX.Element</code>
+                </td>
+                <td>Título de la pestaña.</td>
+              </tr>
+              <tr>
+                <td>
+                  <code>Tab.content</code>
+                </td>
+                <td>
+                  <code>JSX.Element</code>
+                </td>
+                <td>Contenido dentro de la pestaña.</td>
+              </tr>
+              <tr>
+                <td>
+                  <code>Tab.disabled?</code>
+                </td>
+                <td>
+                  <code>boolean</code>
+                </td>
+                <td>Si la pestaña debe estar deshabilitada.</td>
+              </tr>
+            </tbody>
+          </table>
+        </section>
+      </div>
+    </>
+  );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 3f4affd..3211773 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -94,6 +94,12 @@ import BootstrapClient from "@/components/bootstrap-client";`}
           <div className="col-lg-4">
             <ComponentCard title="Sidebar" src="/sidebar.png" href="sidebar" />
           </div>
+          <div className="col-lg-4">
+            <ComponentCard title="Button" src="/button.png" href="button" />
+          </div>
+          <div className="col-lg-4">
+            <ComponentCard title="Tabs" src="/tabs.png" href="tabs" />
+          </div>
         </div>
       </div>
     </main>
diff --git a/src/components/tabs.tsx b/src/components/tabs.tsx
new file mode 100644
index 0000000..2be6821
--- /dev/null
+++ b/src/components/tabs.tsx
@@ -0,0 +1,74 @@
+import React, { useState, JSX } from "react";
+
+interface Tab {
+  id: string;
+  title: string | JSX.Element;
+  content: JSX.Element;
+  disabled?: boolean;
+}
+
+interface TabsProps {
+  tabs: Tab[];
+  style?: "default" | "box";
+  className?: {
+    container?: string;
+    tab?: string;
+    content?: string;
+  };
+}
+
+export default function Tabs({
+  tabs,
+  style = "default",
+  className,
+}: TabsProps) {
+  const [activeTab, setActiveTab] = useState(tabs[0]?.id || "");
+
+  return (
+    <>
+      <ul className={`nav nav-tabs style-${style}`} id="myTab" role="tablist">
+        {tabs.map((tab) => (
+          <li
+            key={tab.id}
+            className="nav-item"
+            role="presentation"
+            title={tab.title.toString()}
+          >
+            <button
+              className={`nav-link ${tab.disabled ? "disabled" : ""} ${
+                activeTab === tab.id ? "active" : ""
+              }`}
+              id={`tab-${tab.id}`}
+              data-bs-toggle="tab"
+              data-bs-target={`#tab-pane-${tab.id}`}
+              type="button"
+              role="tab"
+              aria-controls={`tab-pane-${tab.id}`}
+              aria-selected={activeTab === tab.id}
+              onClick={() => !tab.disabled && setActiveTab(tab.id)}
+            >
+              {tab.title.toString().length > 35
+                ? `${tab.title.toString().slice(0, 35)}...`
+                : tab.title}
+            </button>
+          </li>
+        ))}
+      </ul>
+      <div className="tab-content mt-3" id="myTabContent">
+        {tabs.map((tab) => (
+          <div
+            key={tab.id}
+            className={`tab-pane fade ${
+              activeTab === tab.id ? "show active" : ""
+            } ${className?.content}`}
+            id={`tab-pane-${tab.id}`}
+            role="tabpanel"
+            aria-labelledby={`tab-${tab.id}`}
+          >
+            {activeTab === tab.id && tab.content}
+          </div>
+        ))}
+      </div>
+    </>
+  );
+}
diff --git a/src/styles/sass/_extends.scss b/src/styles/sass/_extends.scss
index e2d4d70..e326d1a 100644
--- a/src/styles/sass/_extends.scss
+++ b/src/styles/sass/_extends.scss
@@ -9,6 +9,11 @@
     @extend .bg-opacity-75;
     @extend .text-white;
   }
+
+  &.disabled {
+    @extend .text-muted;
+    cursor: not-allowed !important;
+  }
 }
 
 .unlink {
diff --git a/src/styles/sass/_tabs.scss b/src/styles/sass/_tabs.scss
new file mode 100644
index 0000000..b864ca3
--- /dev/null
+++ b/src/styles/sass/_tabs.scss
@@ -0,0 +1,16 @@
+.tab-pane.fade {
+  transition: opacity 10s linear !important;
+}
+
+.nav-tabs.style-box {
+  border-bottom: 0cap;
+  gap: 0.8rem;
+  .nav-item .nav-link {
+    @extend .box;
+    @extend .py-2;
+    @extend .text-black;
+
+    margin: 0 !important;
+    border: 0;
+  }
+}
diff --git a/src/styles/sass/bootstrap.scss b/src/styles/sass/bootstrap.scss
index 4cf44c9..2da8cbe 100644
--- a/src/styles/sass/bootstrap.scss
+++ b/src/styles/sass/bootstrap.scss
@@ -26,6 +26,7 @@ $theme-colors: map-merge($theme-colors, $custom-colors);
 @import "utilities";
 @import 'sidebar';
 @import 'hover';
+@import 'tabs';
 
 //Add additional custom code here