Tabs Component

Componente de navegação por abas para organizar conteúdo relacionado em seções distintas. Construído com Radix UI para acessibilidade completa.

Tabs Básicas

Tabs Simples

Estrutura básica de tabs com conteúdo

Tabs com Ícones

Tabs com Ícones

Tabs com ícones para melhor identificação visual

Informações do Perfil
Gerencie suas informações pessoais

Dashboard Tabs

Dashboard com Métricas

Tabs para dashboard com diferentes visualizações

Total de Usuários
2,847

+12% em relação ao mês passado

Receita
R$ 45.231

+8% em relação ao mês passado

Eventos
127

+3 novos esta semana

Implementação

components/ui/tabs.tsxtsx
"use client"

import * as React from "react"
import * as TabsPrimitive from "@radix-ui/react-tabs"
import { cn } from "@/lib/utils"

const Tabs = TabsPrimitive.Root

const TabsList = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.List
    ref={ref}
    className={cn(
      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
      className
    )}
    {...props}
  />
))
TabsList.displayName = TabsPrimitive.List.displayName

const TabsTrigger = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Trigger
    ref={ref}
    className={cn(
      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
      className
    )}
    {...props}
  />
))
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName

const TabsContent = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Content
    ref={ref}
    className={cn(
      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
      className
    )}
    {...props}
  />
))
TabsContent.displayName = TabsPrimitive.Content.displayName

export { Tabs, TabsList, TabsTrigger, TabsContent }
Dica
Use grid w-full grid-cols-n no TabsList para tabs de largura igual. Para tabs responsivas, esconda texto em telas pequenas com hidden sm:inline.

Boas Práticas

✅ Faça

  • • Use ícones para melhor identificação das tabs
  • • Mantenha labels de tabs concisos e descritivos
  • • Agrupe conteúdo relacionado logicamente
  • • Use defaultValue para definir tab inicial
  • • Implemente lazy loading para conteúdo pesado

❌ Evite

  • • Muitas tabs (máximo 5-7 para boa UX)
  • • Tabs aninhadas (use navegação hierárquica)
  • • Conteúdo não relacionado na mesma tab
  • • Labels muito longos que quebram o layout
  • • Esquecer de indicar a tab ativa visualmente