Visão geral

O Tabs organiza conteúdo em grupos acessíveis por aba, sem sair da página.

Demo

Configurações da conta

Atualize suas informações de perfil e e-mail.

Import

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

Padrão de implementação

Snippets para uso do Tabs.

Tabs básico

<Tabs defaultValue="tab1">
  <TabsList>
    <TabsTrigger value="tab1">Aba 1</TabsTrigger>
    <TabsTrigger value="tab2">Aba 2</TabsTrigger>
    <TabsTrigger value="tab3" disabled>Aba 3</TabsTrigger>
  </TabsList>
  <TabsContent value="tab1">
    Conteúdo da Aba 1
  </TabsContent>
  <TabsContent value="tab2">
    Conteúdo da Aba 2
  </TabsContent>
</Tabs>

MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter