Tabs

Alterna entre visões do mesmo contexto sem sair da tela.

Playground

5 perfis gerados.

Variante da lista

Orientação

<Tabs defaultValue="perfis">
  <TabsList>
    <TabsTrigger value="perfis">Perfis</TabsTrigger>
    <TabsTrigger value="fontes">Fontes</TabsTrigger>
  </TabsList>
  <TabsContent value="perfis">…</TabsContent>
  <TabsContent value="fontes">…</TabsContent>
</Tabs>

Quando usar

✓2 a 5 seções paralelas do mesmo objeto (Resumo · Fontes · Histórico)

Evite quando

Passos em sequência→ um fluxo com etapas, não abas
Filtro que não troca o conteúdo inteiro→ ToggleGroup

Variantes e props

variant (TabsList)padrão: default

defaultline

line = sublinhado, para cabeçalhos de página

orientationpadrão: horizontal

horizontalvertical

Estados

activehoverfocus-visibledisabled

Acompanha data-density="compact" (tamanhos vêm de --spacing, --text-*, --radius).

Acessibilidade

Papel: tablist / tab / tabpanel
Teclado: setas trocam de aba

Rótulos curtos e paralelos

Código

Partes: Tabs, TabsList, TabsTrigger, TabsContent

import

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";

Fonte: src/components/ui/tabs.tsx · Resense (shadcn base-nova, Base UI)

Relacionados: ToggleGroup