Scheiding

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

export function SeparatorDemo() {

De separator tekent een dunne horizontale of verticale lijn tussen blokken inhoud. Gebouwd op de component Base UI Separator en bewust minimaal gehouden: één enkele lijn in de border-kleur van het thema — dezelfde massieve streek die elk neobrutalistisch kader omlijnt.

Ideaal voor:

• Menu- en werkbalksecties — scheid groepen acties in dropdowns, zijbalken en commandobalken.
• Gestapelde lijsten — verdeel rijen in instellingenpagina's, feeds en meldingenpanelen.
• Inline metadata — verticale lijnen tussen statistieken zoals weergaven, sterren en laatst-bijgewerkt-datums.

Installatie#

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
Kopiëren

pnpmnpmyarnbun
pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react
Kopiëren

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

Gebruik#

Kopiërenimport { Separator } from "@/components/ui/separator"

Kopiëren<Separator />

Voorbeelden#

Verticaal#

Gebruik orientation="vertical" voor een verticaal scheidingsteken.

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

export function SeparatorVertical() {

Menu#

Verticale scheidingstekens tussen menu-items met beschrijvingen.

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

export function SeparatorMenu() {

Lijst#

Horizontale scheidingstekens tussen lijstitems.

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

export function SeparatorList() {

RTL#

Om RTL-ondersteuning in Neobrutalism in te schakelen, zie de RTL-configuratiegids.

"use client"

import * as React from "react"

Toegankelijkheid#

De Separator van Base UI rendert altijd role="separator", met een aria-orientation die de orientation-prop weerspiegelt, zodat schermlezers hem aankondigen als een semantische scheiding. Voor lijnen die puur decoratief zijn — tussen inline statistieken bijvoorbeeld — voeg je aria-hidden="true" toe (of gebruik je een gewone gestylede <div>), zodat ondersteunende technologie geen scheidingen voorleest die geen betekenis dragen. Let op: dit verschilt van de Radix-variant, die standaard decoratief is (role="none").

API-referentie#

Zie de documentatie van Base UI Separator.