Séparateur

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

export function SeparatorDemo() {

Le séparateur trace un fin filet horizontal ou vertical entre des blocs de contenu. Construit sur le composant Base UI Separator et volontairement minimal : une simple ligne dans la couleur border du thème — le même trait plein qui délimite chaque cadre néobrutaliste.

À privilégier dans ces cas :

• Sections de menus et de barres d’outils — séparez des groupes d’actions dans les menus déroulants, les barres latérales et les barres de commandes.
• Listes empilées — délimitez les lignes des pages de réglages, des fils d’actualité et des panneaux de notifications.
• Métadonnées en ligne — des filets verticaux entre des statistiques comme les vues, les étoiles et la date de dernière mise à jour.

Installation#

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
Copier

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

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

Utilisation#

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

Copier<Separator />

Exemples#

Vertical#

Utilisez orientation="vertical" pour un séparateur vertical.

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

export function SeparatorVertical() {

Menu#

Des séparateurs verticaux entre des éléments de menu accompagnés de descriptions.

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

export function SeparatorMenu() {

Liste#

Des séparateurs horizontaux entre des éléments de liste.

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

export function SeparatorList() {

RTL#

Pour activer le RTL dans Neobrutalism, consultez le guide de configuration RTL.

"use client"

import * as React from "react"

Accessibilité#

Le Separator de Base UI rend toujours role="separator", avec aria-orientation qui reflète la prop orientation, si bien que les lecteurs d’écran l’annoncent comme un séparateur sémantique. Pour les filets purement décoratifs — entre des statistiques en ligne, par exemple — ajoutez aria-hidden="true" (ou utilisez un simple <div> stylé) afin que les technologies d’assistance n’annoncent pas des séparations dépourvues de sens. Notez que ce comportement diffère de la variante Radix, décorative (role="none") par défaut.

Référence API#

Consultez la documentation Base UI Separator.