Componentes

Tabs

Navegação por seções dentro de uma mesma tela. Tabs não carregam novas páginas — alternam o conteúdo visível no mesmo contexto.

Visão geral

Dark Side of the Moon

ArtistaPink Floyd

GravadoraHarvest / EMI

Ano1973

GêneroRock Progressivo

FormatoLP, 12", 33⅓ RPM

A1Speak to Me / Breathe3:58

A2On the Run3:36

A3Time7:06

A4The Great Gig in the Sky4:47

@roberto.vinyl

Obra-prima do rock progressivo.

@anna.discos

Scratch no A3 mas ainda incrível.

↑ Clique nas abas para alternar o conteúdo

Dark Side of the Moon

Container

flex border-b border-[#2a2a2a] · scroll horizontal quando tabs não cabem · overflow-x-auto scrollbar-none

Tab ativo

color:#f5f5f5 · border-bottom: 2px solid #C8F53C · pb-2 px-4

Tab inativo

color:#888 · border-bottom: 2px solid transparent · mesma altura que o ativo para não pular

Ativo

color: #f5f5f5 · border-bottom: 2px solid #C8F53C

Inativo

color: #888 · border transparente — sem deslocamento visual

Pressed

active:bg-[#111] · duração 0.1s

Overflow

overflow-x-auto scrollbar-none · fade no fim indica mais conteúdo

Faça2–4 abas com labels curtos (1–2 palavras). Tabs alternam conteúdo dentro do contexto atual.

EviteNão use tabs como botões (rounded, filled). Labels longos quebram o padrão de strip.

Conteúdo alterna aqui

FaçaSempre exatamente 1 tab ativo. O conteúdo muda imediatamente ao tocar.

EviteNão misture Tabs com Chips na mesma tela — são padrões que competem. Use Chips para filtro, Tabs para seções.

Propriedade	Ativo	Inativo
Cor do texto	`#f5f5f5`	`#888`
Indicador	`2px solid #C8F53C` na base	`2px solid transparent`
Padding	`pb-2 px-4` · 8px vertical, 16px horizontal
Font size	`13px`
Font weight	`600` (semibold)
Transição	`color 0.15s ease`
Overflow	`overflow-x-auto scrollbar-none`
Elemento HTML	`<button>` dentro de `<div role="tablist">`
Painel	`role="tabpanel"` · exibido por `display:block/none`
Quantidade	2 a 4 abas. Mais de 4 → preferir scroll ou reorganizar hierarquia