Separatore

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

export function SeparatorDemo() {

Il separator traccia una sottile linea orizzontale o verticale tra blocchi di contenuto. Costruito sul componente Base UI Separator e mantenuto volutamente minimale: un’unica linea nel colore border del tema — lo stesso tratto pieno che contorna ogni cornice neobrutalista.

Quando usarlo:

• Sezioni di menu e toolbar — separa gruppi di azioni in dropdown, sidebar e barre dei comandi.
• Elenchi impilati — divide le righe in pagine di impostazioni, feed e pannelli di notifiche.
• Metadati inline — linee verticali tra statistiche come visualizzazioni, stelle e date dell’ultimo aggiornamento.

Installazione#

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
Copia

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

"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 }

Utilizzo#

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

Copia<Separator />

Esempi#

Verticale#

Usa orientation="vertical" per un separatore verticale.

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

export function SeparatorVertical() {

Menu#

Separatori verticali tra le voci di menu con descrizioni.

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

export function SeparatorMenu() {

Elenco#

Separatori orizzontali tra gli elementi di un elenco.

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

export function SeparatorList() {

RTL#

Per abilitare il supporto RTL in Neobrutalism, consulta la guida alla configurazione RTL.

"use client"

import * as React from "react"

Accessibilità#

Il Separator di Base UI rende sempre role="separator", con aria-orientation che riflette la prop orientation, quindi gli screen reader lo annunciano come divisore semantico. Per le linee puramente decorative — tra statistiche inline, per esempio — aggiungi aria-hidden="true" (o usa un semplice <div> stilizzato) così le tecnologie assistive non annunciano divisori privi di significato. Nota che questo comportamento differisce dalla variante Radix, che di default è decorativa (role="none").

Riferimento API#

Consulta la documentazione Base UI Separator.