Componentes

Tabs

Alternar painéis de conteúdo no mesmo contexto.

Navegação

Carregando demonstração…

Código da demo
"use client";

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

export function Demo() {
  return (
    <Tabs defaultValue="account" className="w-full max-w-md">
      <TabsList>
        <TabsTrigger value="account">Conta</TabsTrigger>
        <TabsTrigger value="password">Senha</TabsTrigger>
      </TabsList>
      <TabsContent value="account" className="fe-body text-muted-foreground">
        Preferências da conta.
      </TabsContent>
      <TabsContent value="password" className="fe-body text-muted-foreground">
        Altere sua senha (demo local).
      </TabsContent>
    </Tabs>
  );
}

Use

  • Alternar vistas do mesmo objeto, no mesmo lugar.
  • Rótulos curtos, de uma palavra quando der.

Não use

  • Não use como passo a passo: use Stepper.
  • Não esconda nas abas o que a pessoa precisa comparar.
Acessibilidade
role=tablist; setas entre tabs; painel associado.
Importar
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@financeequity/ui/tabs"

Neste repositório:

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
Dependências
radix-ui