---
title: Tabs
description: "Paneles intercambiables para contenido mutuamente excluyente, como gestores de paquetes o lenguajes. Los títulos coincidentes se sincronizan en la página."
---

Cuando tu página ofrece alternativas paralelas — gestores de paquetes, lenguajes de programación, instrucciones específicas del sistema operativo — los Tabs permiten a los lectores elegir una vez y mantenerse en contexto. Los títulos de pestaña coincidentes se sincronizan automáticamente en toda la página, de modo que seleccionar "yarn" en un grupo cambia todos los demás grupos npm/yarn/pnpm para que coincidan.

Usa Tabs cuando:
- **Existen múltiples implementaciones** del mismo concepto (npm/yarn/pnpm, JavaScript/Python)
- **Las opciones paralelas** son mutuamente excluyentes (los usuarios eligen una, no ambas)
- **La consistencia importa** — la elección del lector debe persistir a lo largo de la página

## Uso

```mdx
<Tabs>
  <Tab title="npm">npm install jamdesk</Tab>
  <Tab title="pnpm">pnpm add jamdesk</Tab>
</Tabs>
```

## Tabs básicos

<Tabs>
  <Tab title="First Tab">
    Content for the first tab.
  </Tab>
  <Tab title="Second Tab">
    Content for the second tab.
  </Tab>
  <Tab title="Third Tab">
    Content for the third tab.
  </Tab>
</Tabs>

```mdx
<Tabs>
  <Tab title="First Tab">
    Content for the first tab.
  </Tab>
  <Tab title="Second Tab">
    Content for the second tab.
  </Tab>
  <Tab title="Third Tab">
    Content for the third tab.
  </Tab>
</Tabs>
```

## Tabs vs CodeGroup vs Accordion

| Componente | Ideal para | Se sincroniza |
|-----------|----------|--------------|
| **Tabs** | Opciones de contenido mutuamente excluyentes | Sí (en toda la página) |
| **CodeGroup** | Bloques de código en múltiples lenguajes | No |
| **Accordion** | Secciones plegables, preguntas frecuentes | No |

**Regla general:** Usa Tabs cuando la elección del lector (como el gestor de paquetes preferido) debe persistir a lo largo de la página. Usa CodeGroup para comparaciones exclusivamente de código. Usa Accordion para contenido que puede ser relevante en su totalidad.

## Tabs con iconos

Agrega iconos a los títulos de pestaña usando iconos de Font Awesome:

<Tabs>
  <Tab title="React" icon="react" iconType="brands">
    ```jsx
    function App() {
      return <h1>Hello React</h1>;
    }
    ```
  </Tab>
  <Tab title="Vue" icon="vuejs" iconType="brands">
    ```vue
    <template>
      <h1>Hello Vue</h1>
    </template>
    ```
  </Tab>
</Tabs>

````mdx
<Tabs>
  <Tab title="React" icon="react" iconType="brands">
    ```jsx
    function App() {
      return <h1>Hello React</h1>;
    }
    ```
  </Tab>
  <Tab title="Vue" icon="vuejs" iconType="brands">
    ```vue
    <template>
      <h1>Hello Vue</h1>
    </template>
    ```
  </Tab>
</Tabs>
````

## Borde inferior

Usa la prop `borderBottom` para agregar un separador visual debajo del contenido de la pestaña:

<Tabs borderBottom>
  <Tab title="Overview">
    This tab group has a bottom border for visual separation.
  </Tab>
  <Tab title="Details">
    Useful when tabs contain varying content lengths.
  </Tab>
</Tabs>

```mdx
<Tabs borderBottom>
  <Tab title="Overview">
    This tab group has a bottom border for visual separation.
  </Tab>
  <Tab title="Details">
    Useful when tabs contain varying content lengths.
  </Tab>
</Tabs>
```

## Tabs sincronizados

Los tabs con títulos coincidentes se sincronizan automáticamente en toda la página. Haz clic en "yarn" en un grupo y todos los tabs npm/yarn/pnpm de la página cambian juntos:

**Instalar:**

<Tabs>
  <Tab title="npm">
    ```bash
    npm install my-package
    ```
  </Tab>
  <Tab title="yarn">
    ```bash
    yarn add my-package
    ```
  </Tab>
</Tabs>

**Ejecutar:**

<Tabs>
  <Tab title="npm">
    ```bash
    npm run dev
    ```
  </Tab>
  <Tab title="yarn">
    ```bash
    yarn dev
    ```
  </Tab>
</Tabs>

La sincronización ocurre cuando los títulos de pestaña coinciden (sin distinción de mayúsculas y minúsculas).

## Props

### Tabs

<ParamField name="borderBottom" type="boolean" default="false">
  Agrega un borde inferior y relleno al contenedor de contenido de la pestaña. Útil para separar visualmente el contenido con pestañas del resto de la página.
</ParamField>

### Tab

<ParamField name="title" type="string" required>
  La etiqueta que se muestra en la barra de pestañas. Los tabs con títulos coincidentes sincronizan automáticamente su selección en toda la página.
</ParamField>

<ParamField name="icon" type="string">
  Nombre del icono de Font Awesome para mostrar antes del título (por ejemplo, "react", "code", "terminal").
</ParamField>

<ParamField name="iconType" type="string" default="solid">
  Estilo del icono de Font Awesome. Opciones: `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.
</ParamField>

## ¿Qué sigue?

<Columns cols={2}>
  <Card title="Descripción general de componentes" icon="puzzle-piece" href="/es/components/overview">
    Explora todos los componentes disponibles
  </Card>
  <Card title="Conceptos básicos de MDX" icon="file-code" href="/es/content/mdx-basics">
    Aprende a usar componentes en MDX
  </Card>
</Columns>