Tabs

Display

Tab navigation with 4 variants (line/pill/card/enclosed), icons, badges and TabPanel.

Instalação via CLI

$ npx kikitocn add tabs

Interno:

@/lib/utils

Exemplo de uso

TabsExample.tsx

import { Tabs } from "@/components/ui/cn/tabs/Tabs";

export function TabsExample() {
  return (
    <Tabs />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`items*`	`TabItem[]`	—	Lista de abas: { value, label, icon?, badge?, disabled? }
`value`	`string`	`undefined`	Aba ativa (controlled)
`defaultValue`	`string`	`undefined`	Aba ativa inicial (uncontrolled)
`onChange`	`(value: string) => void`	`undefined`	Callback quando a aba muda
`variant`	`'line' \| 'pill' \| 'card' \| 'enclosed'`	`'line'`	Estilo visual das abas
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Tamanho das abas
`align`	`'start' \| 'center' \| 'end' \| 'stretch'`	`'start'`	Alinhamento das abas

Carregando…

Variants