Reddot UI Library

Docs
Separator

Separator

Visually or semantically separates content.

Installation

$npx shadcn@latest add https://reddot.dottools.xyz/r/separator.json

Utilisation

Importez le composant Separator et utilisez-le dans votre composant React :

import { Separator } from "@/components/ui/separator"
 
export function SeparatorDemo() {
  return (
    <div>
      <div className="space-y-1">
        <h4 className="text-sm leading-none font-medium">Radix Primitives</h4>
        <p className="text-muted-foreground text-sm">
          An open-source UI component library.
        </p>
      </div>
      <Separator className="my-4" />
      <div className="flex h-5 items-center space-x-4 text-sm">
        <div>Blog</div>
        <Separator orientation="vertical" />
        <div>Docs</div>
        <Separator orientation="vertical" />
        <div>Source</div>
      </div>
    </div>
  )
}

API Reference

Separator

Crée une division visuelle ou sémantique entre les éléments de contenu.

PropTypeDefaultDescription
orientation"horizontal" | "vertical""horizontal"Détermine l'orientation du séparateur.
decorativebooleantrueSi true, indique que le séparateur est purement décoratif et n'a pas de signification sémantique.
classNamestring-Classes CSS additionnelles pour le style.

Exemples

Séparateur horizontal

<div className="space-y-4">
  <p>Contenu au-dessus</p>
  <Separator />
  <p>Contenu en-dessous</p>
</div>

Séparateur vertical

<div className="flex items-center space-x-4">
  <span>Élément 1</span>
  <Separator orientation="vertical" className="h-4" />
  <span>Élément 2</span>
  <Separator orientation="vertical" className="h-4" />
  <span>Élément 3</span>
</div>

Séparateur avec style personnalisé

<Separator className="my-4 bg-gradient-to-r from-transparent via-neutral-300 to-transparent" />

Références