Tabs

Conjunto de painéis de conteúdo sobrepostos, chamados de Tab Panels, exibidos um de cada vez.

Exemplos

Standalone (fora do header)

Barra de abas com borda e cantos arredondados, ideal para cards ou seções de conteúdo. Ocupa toda a largura do container, como a variante header.

Header (dentro do header)

Tabs que ocupam toda a largura, ideais para a navegação principal da página.

Com ícones

As tabs podem ter ícones para facilitar a identificação visual.

Com badges

As tabs podem ter badges para indicar contagens ou status.

Tamanhos

As tabs estão disponíveis nos tamanhos md e lg.

Personalização

Cada elemento pode ser personalizado individualmente com classes CSS.

Não responsivo

Desative o comportamento responsivo para manter um tamanho fixo em todas as telas.

Com aba desabilitada

As tabs podem ser desabilitadas para impedir a interação do usuário.

API

Estrutura das Tabs

Componente	Descrição	Uso
Tabs	Componente raiz que gerencia o estado das tabs	Contém todos os outros componentes de tabs
TabsList	Container dos triggers das tabs	Agrupa os botões de navegação das tabs
TabsTrigger	Botão clicável de cada aba	Ativa o painel de conteúdo correspondente
TabsContent	Painel de conteúdo de cada aba	Exibido quando a aba correspondente está ativa

Tabs

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
defaultValue	string	Qualquer string	-	Valor da aba que fica ativa por padrão.
value	string	Qualquer string	-	Valor controlado da aba ativa.
onValueChange	(value: string) => void	-	-	Função chamada quando o valor da aba muda.
variant	"header" | "standalone"	"header", "standalone"	"standalone"	Estilo da barra de abas. standalone: barra com borda e cantos arredondados. header: só uma linha inferior, sem fundo, com padding lateral responsivo. As duas preenchem a largura do container.
size	"md" | "lg"	"md", "lg"	"md"	Tamanho das tabs.
responsive	boolean	true, false	true	Ativa o comportamento responsivo, que ajusta o tamanho no mobile/tablet.
className	string	Qualquer classe CSS	-	Classes CSS adicionais para personalização.

TabsList

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
className	string	Qualquer classe CSS	-	Classes CSS adicionais para personalização.
wrapperClassName	string	Qualquer classe CSS	-	Classes CSS adicionais para o wrapper externo (data-slot="tabs-list-wrapper").
scrollContainerClassName	string	Qualquer classe CSS	-	Classes CSS adicionais para o container de rolagem horizontal.
innerClassName	string	Qualquer classe CSS	-	Classes CSS adicionais para o elemento interno que envolve a lista e o indicador.
indicatorClassName	string	Qualquer classe CSS	-	Classes CSS adicionais para o indicador deslizante da aba ativa.
leftFadeClassName	string	Qualquer classe CSS	-	Classes CSS adicionais para o degradê de fade à esquerda, exibido quando a lista é rolada.
rightFadeClassName	string	Qualquer classe CSS	-	Classes CSS adicionais para o degradê de fade à direita, exibido quando há mais abas escondidas.

TabsTrigger

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
value	string	Qualquer string	-	Valor único que identifica a aba.
icon	React.ReactNode	Qualquer nó React	-	Ícone exibido antes do texto da aba.
badge	React.ReactNode	Qualquer nó React	-	Badge exibido depois do texto da aba.
disabled	boolean	true, false	false	Desabilita a interação com a aba.
className	string	Qualquer classe CSS	-	Classes CSS adicionais para personalização.

TabsContent

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
value	string	Qualquer string	-	Valor único que liga o conteúdo à sua aba.
forceMount	true	true	-	Mantém o conteúdo montado mesmo quando inativo. O tipo só aceita true: para não forçar a montagem, basta omitir a prop.
className	string	Qualquer classe CSS	-	Classes CSS adicionais para personalização.

Acessibilidade

O componente Tabs segue o padrão WAI-ARIA para abas:

• Usa role="tablist", role="tab" e role="tabpanel" corretamente
• Suporta navegação por teclado (setas, Tab, Enter, Espaço)
• Gerencia aria-selected e aria-controls automaticamente
• O conteúdo inativo é removido do DOM por padrão (use forceMount se precisar)