Tabs

Organiza contenido en paneles conmutables sin recargar. El usuario cambia de sección sin perder el contexto.

Preview principal

TABSunderline · default

CuentaNotificacionesIntegracionesPlanesFacturación

Contenido de la pestaña «account».

Variantes: underline y pills. Los iconos van en cada item.

Underline

Línea bajo la pestaña activa (default).

CuentaNotificacionesIntegracionesPlanesFacturación

Pills

El activo usa el color de marca.

CuentaAlertasIntegracionesPlanes

Con icono

Cada item puede llevar icon del set Lucide curado.

CuentaAlertasIntegracionesFacturación

Deshabilitado

disabled en el item — no se puede seleccionar.

ActivoInactivoOtro

Variantes

Variante	Descripción
underline	Línea bajo la pestaña activa (default)
pills	Píldoras; el activo usa color de marca

Los iconos no son una variante: se pasan en cada item.icon.

Uso

import { Tabs } from "devsoftec-ui";

<Tabs
  items={[
    { value: "account", label: "Cuenta", icon: "user" },
    { value: "billing", label: "Facturación", disabled: true },
  ]}
  defaultValue="account"
  onValueChange={(v) => console.log(v)}
  variant="underline"
>
  <div>Contenido del panel</div>
</Tabs>

Props

Prop	Tipo	Descripción
items	TabItem[]	value, label, icon?, disabled?
value / defaultValue	string	Activa (controlada / no controlada)
onValueChange	(value) => void	Al cambiar
variant	underline | pills	Estilo visual
children	ReactNode	Panel bajo el tablist

Accesibilidad

• role="tablist", role="tab", role="tabpanel".
• Activa: aria-selected="true"; el resto tabIndex={-1}.