NavigationDisponible

Tabs

Paneles de contenido relacionados con navegación mediante teclado.

Build with character

Move focus with arrow keys, then select with Enter or Space.

Loading example…

Instalación

Agrega el componente y sus dependencias desde el registro que está ejecutándose en tu computadora.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/tabs.json

Uso

Importa el componente en tu proyecto y conserva el código bajo tu control.

tsx

'use client';

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

export default function Demo() {
  return (
    <Tabs defaultValue="preview" className="w-full max-w-lg">
      <TabsList aria-label="Component information">
        <TabsTrigger value="preview">Preview</TabsTrigger>
        <TabsTrigger value="details">Details</TabsTrigger>
        <TabsTrigger value="history" disabled>
          History
        </TabsTrigger>
      </TabsList>
      <TabsContent
        value="preview"
        className="rounded-lg border-2 border-ink bg-card p-5"
      >
        <h3 className="bl-type-card-title">Build with character</h3>
        <p className="mt-2 bl-type-body">Move focus with arrow keys, then select with Enter or Space.</p>
      </TabsContent>
      <TabsContent
        value="details"
        className="rounded-lg border-2 border-ink bg-card p-5"
      >
        <p className="bl-type-body">
          Tabs group related panels while keeping one panel visible.
        </p>
      </TabsContent>
    </Tabs>
  );
}

Estados e interacción

Aspecto, comportamiento y comprobación con teclado.

Comprueba reposo, hover, foco y selección/expansión. El enlace actual y el contenido abierto deben identificarse semánticamente.
No confundas pasar el cursor con seleccionar. Mantén el estado activo cuando el cursor se retire.
Prueba el ejemplo con Tab y Shift+Tab. El foco debe seguir visible en ambos temas.

Referencia API

Propiedades propias de BrutalLab. También acepta los atributos nativos correspondientes.

Prop	Tipo	Default	Descripción
defaultValue	string	—	Initially selected tab.
orientation	horizontal / vertical	horizontal	Tab list direction.

Accesibilidad

Reglas que deben conservarse cuando el componente se adapte a un producto.

Conserva las etiquetas visibles y el HTML semántico del ejemplo.

Mantén el foco visible y comprueba la composición mediante el teclado.

Personaliza el aspecto con className sin reemplazar los atributos ARIA de la primitiva.

Las flechas mueven el foco; Enter o Espacio seleccionan la pestaña con la activación manual predeterminada.