Separador

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

export function SeparatorDemo() {

El separador dibuja una línea fina, horizontal o vertical, entre bloques de contenido. Está construido sobre el componente Base UI Separator y se mantiene deliberadamente mínimo: una sola línea en el color border del tema, el mismo trazo sólido que perfila cada marco neobrutalista.

Recurre a este componente cuando:

• Secciones de menús y barras de herramientas — separa grupos de acciones en menús desplegables, barras laterales y barras de comandos.
• Listas apiladas — divide las filas en páginas de ajustes, feeds y paneles de notificaciones.
• Metadatos en línea — líneas verticales entre estadísticas como vistas, estrellas y fecha de última actualización.

Instalación#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/separator.json
npx shadcn@latest add https://neobrutalism.com/r/base/separator.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/separator.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/separator.json
Copiar

pnpmnpmyarnbun
pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react
Copiar

"use client"

import * as React from "react"
import { Separator as SeparatorPrimitive } from "radix-ui"

import { cn } from "@/lib/utils"

function Separator({
  className,
  orientation = "horizontal",
  decorative = true,
  ...props
}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
  return (
    <SeparatorPrimitive.Root
      data-slot="separator"
      decorative={decorative}
      orientation={orientation}
      className={cn(
        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
        className
      )}
      {...props}
    />
  )
}

export { Separator }

Uso#

Copiarimport { Separator } from "@/components/ui/separator"

Copiar<Separator />

Ejemplos#

Vertical#

Usa orientation="vertical" para un separador vertical.

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

export function SeparatorVertical() {

Menú#

Separadores verticales entre elementos de menú con descripciones.

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

export function SeparatorMenu() {

Lista#

Separadores horizontales entre elementos de una lista.

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

export function SeparatorList() {

RTL#

Para activar el soporte RTL en Neobrutalism, consulta la guía de configuración de RTL.

"use client"

import * as React from "react"

Accesibilidad#

El Separator de Base UI siempre renderiza role="separator", con aria-orientation reflejando la prop orientation, de modo que los lectores de pantalla lo anuncian como un divisor semántico. Para líneas puramente decorativas (entre estadísticas en línea, por ejemplo) añade aria-hidden="true" —o usa un simple <div> con estilos— para que la tecnología de asistencia no anuncie divisores sin significado. Ten en cuenta que esto difiere de la variante de Radix, que es decorativa (role="none") por defecto.

Referencia de API#

Consulta la documentación Base UI Separator.