Capítulo 40 de 108

Tabs

Core Idea

Um conjunto de painéis de conteúdo em camadas (tab panels) exibidos um de cada vez, com navegação por clique ou teclado. Built on Base UI Tabs.

Key Concepts

  • Tabs: componente raiz, controla defaultValue/value (tab ativa) e orientation.
  • TabsList: container dos triggers; aceita variant="line" para estilo de linha e dir para RTL.
  • TabsTrigger: botão que ativa um painel via prop value; aceita disabled.
  • TabsContent: painel de conteúdo associado a um value.
  • orientation="vertical": reorganiza TabsList na vertical.

Code Examples

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

<Tabs defaultValue="account" className="w-[400px]">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">Make changes to your account here.</TabsContent>
  <TabsContent value="password">Change your password here.</TabsContent>
</Tabs>
  • O que demonstra: uso básico de Tabs com TabsList/TabsTrigger/TabsContent pareados por value.
<Tabs defaultValue="preview">
  <TabsList>
    <TabsTrigger value="preview">
      <AppWindowIcon />
      Preview
    </TabsTrigger>
    <TabsTrigger value="code">
      <CodeIcon />
      Code
    </TabsTrigger>
  </TabsList>
</Tabs>
  • O que demonstra: ícone lucide-react antes do texto dentro de TabsTrigger.

Reference Tables

Composição:

Tabs
├── TabsList
│   ├── TabsTrigger
│   └── TabsTrigger
├── TabsContent
└── TabsContent

Key Takeaways

  1. Cada TabsTrigger/TabsContent são pareados pelo mesmo value, não por posição/ordem.
  2. TabsList variant="line" troca o estilo padrão (pill) por sublinhado.
  3. orientation="vertical" funciona tanto em Tabs quanto propaga pra TabsList.
  4. disabled em TabsTrigger impede a troca de painel sem remover visualmente o item.
  5. Instalação manual requer npm install @base-ui/react.

Connects To

  • Card: usado tipicamente dentro de TabsContent para estruturar cada painel.
  • RTL guide (/docs/rtl): necessário pra dir funcionar corretamente em TabsList/Tabs.
AnteriorSidebarPróximoSeparator