---
title: Abas
description: Painéis alternáveis para conteúdos mutuamente exclusivos, como gerenciadores de pacotes ou linguagens. Títulos correspondentes sincronizam-se em toda a página.
---

> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.

Sempre que sua página oferecer alternativas paralelas (gerenciadores de pacotes, linguagens de programação ou instruções específicas para cada sistema operacional), Tabs permitem que os leitores escolham uma opção e permaneçam no contexto. Títulos de abas correspondentes são sincronizados automaticamente em toda a página, portanto, selecionar "yarn" em um grupo alterna todos os outros grupos npm/yarn/pnpm para a mesma opção.

Use Tabs quando:
- **Existirem várias implementações** do mesmo conceito (npm/yarn/pnpm, JavaScript/Python)
- **As opções paralelas** forem mutuamente exclusivas (os usuários escolhem uma, não ambas)
- **A consistência for importante** - a escolha do leitor deve persistir em toda a página

## Uso

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

## Abas básicas

<Tabs>
  <Tab title="Primeira aba">
    Conteúdo da primeira aba.
  </Tab>
  <Tab title="Segunda aba">
    Conteúdo da segunda aba.
  </Tab>
  <Tab title="Terceira aba">
    Conteúdo da terceira aba.
  </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>
```

## Abas vs CodeGroup vs Accordion

| Componente | Ideal para | Sincroniza |
|-----------|----------|--------------|
| **Tabs** | Escolhas de conteúdo mutuamente exclusivas | Sim (em toda a página) |
| **CodeGroup** | Blocos de código em várias linguagens | Não |
| **Accordion** | Seções recolhíveis, perguntas frequentes | Não |

**Regra prática:** use Tabs quando a escolha do leitor (como o gerenciador de pacotes preferido) deve persistir em toda a página. Use CodeGroup para comparações apenas de código. Use Accordion para conteúdos que podem ser relevantes simultaneamente.

## Abas com ícones

Adicione ícones aos títulos das abas usando ícones do 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>
````

## Borda inferior

Use a propriedade `borderBottom` para adicionar um separador visual abaixo do conteúdo das abas:

<Tabs borderBottom>
  <Tab title="Visão geral">
    Este grupo de abas tem uma borda inferior para criar uma separação visual.
  </Tab>
  <Tab title="Detalhes">
    Útil quando as abas contêm conteúdos com comprimentos variados.
  </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>
```

## Abas sincronizadas

Abas com títulos correspondentes são sincronizadas automaticamente em toda a página. Clique em "yarn" em um grupo e todas as abas npm/yarn/pnpm da página mudarão juntas:

**Instalar:**

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

**Executar:**

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

A sincronização ocorre quando os títulos das abas coincidem, sem distinção entre maiúsculas e minúsculas.

## Propriedades

### Tabs

<ParamField name="borderBottom" type="boolean" default="false">
  Adiciona uma borda inferior e preenchimento ao contêiner de conteúdo das abas. Útil para separar visualmente o conteúdo das abas do restante da página.
</ParamField>

### Tab

<ParamField name="title" type="string" required>
  O rótulo exibido na barra de abas. Abas com títulos correspondentes sincronizam automaticamente suas seleções em toda a página.
</ParamField>

<ParamField name="icon" type="string">
  Nome do ícone do Font Awesome a ser exibido antes do título (por exemplo, "react", "code", "terminal").
</ParamField>

<ParamField name="iconType" type="string" default="solid">
  Estilo do ícone do Font Awesome. Opções: `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.
</ParamField>

## O que vem a seguir?

<Columns cols={2}>
  <Card title="Visão geral dos componentes" icon="puzzle-piece" href="/pt/components/overview">
    Navegue por todos os componentes disponíveis
  </Card>
  <Card title="Fundamentos do MDX" icon="file-code" href="/pt/content/mdx-basics">
    Aprenda a usar componentes no MDX
  </Card>
</Columns>