Separator

Divisor visual entre secciones de contenido

Componente separador para dividir contenido visualmente. Úsalo en horizontal entre bloques o en vertical dentro de layouts flex.

Sección uno

Sección dos

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

export default function Example() {
  return (
    <div className="space-y-4">
      <div>Sección uno</div>
      <Separator />
      <div>Sección dos</div>
    </div>
  );
}

View Code

Instalación

bash

liminal add separator

Uso

Sección uno

Sección dos

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

export default function Example() {
  return (
    <div className="space-y-4">
      <div>Sección uno</div>
      <Separator />
      <div>Sección dos</div>
    </div>
  );
}

View Code

Ejemplos

Horizontal (por defecto)

Sección uno

Sección dos

<Separator />

View Code

Vertical

Item A

Item B

<div className="flex h-10 items-center gap-4">
  <span>Item A</span>
  <Separator orientation="vertical" />
  <span>Item B</span>
</div>

View Code

API

Prop	Type	Default	Description
orientation	"horizontal" \| "vertical"	"horizontal"	Dirección del separador.
decorative	boolean	false	Si es true, el separador es puramente visual (sin rol de accesibilidad).