PrimitiveDisponible

Separator

Límite visual o semántico entre grupos de contenido.

Workspace

Your shared component collection.

12 components

3 members

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/separator.json

Uso

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

tsx

'use client';

import { Separator } from '@/components/ui/separator';

export default function Demo() {
  return (
    <div className="grid w-full max-w-md gap-4">
      <h3 className="bl-type-card-title">Workspace</h3>
      <p className="bl-type-small">Your shared component collection.</p>
      <Separator />
      <div className="flex h-6 items-center gap-4 bl-type-label">
        <span>12 components</span>
        <Separator orientation="vertical" />
        <span>3 members</span>
      </div>
    </div>
  );
}

Estados e interacción

Aspecto, comportamiento y comprobación con teclado.

Es una superficie o contenido, no un control por defecto. No añade hover, pulsado ni foco ficticios.
Las acciones internas usan Button o enlaces. Un estado informativo necesita texto además del color.

Referencia API

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

Prop	Tipo	Default	Descripción
orientation	horizontal / vertical	horizontal	Direction of the separator.

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.