72Los geht’s
HextaUI

Separator

Eine Haarlinie, die Inhalte horizontal oder vertikal trennt, mit optionalem Label und einem dekorativen Modus für rein visuelle Linien.

HextaUI

Components that feel great to use and to write.

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

export function SeparatorDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4 text-sm">
      <div className="flex flex-col gap-1">
        <h4 className="font-medium">HextaUI</h4>
        <p className="text-muted-foreground">
          Components that feel great to use and to write.
        </p>
      </div>
      <Separator />
      <div className="flex h-5 items-center gap-4">
        <a href="#">Docs</a>
        <Separator orientation="vertical" />
        <a href="#">Components</a>
        <Separator orientation="vertical" />
        <a href="#">Source</a>
      </div>
    </div>
  )
}

Installation

pnpm dlx shadcn@latest add https://hextaui.com/r/separator.json

Fügt die Komponente, die HextaUI-Theme-Tokens und alle HextaUI-Komponenten hinzu, von denen sie abhängt.

Verwendung

import { Separator } from "@/components/ui/separator"
<Separator />
<Separator orientation="vertical" />
<Separator>Or continue with</Separator>

Die Linie ist auf jedem Bildschirm ein physisches Pixel dick, dieselbe feine Linie wie Rahmen, sodass sie mit Karten und Inputs ringsum fluchtet. Setze Abstände über das gap des Elternelements oder einen Margin.

Beispiele

Vertikal

Mit orientation="vertical" streckt sich die Linie auf die Höhe ihrer Flex-Zeile. Außerhalb einer Flex-Zeile gib ihr eine Höhe.

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

export function SeparatorVertical() {
  return (
    <div className="flex items-center gap-4 text-sm">
      <div className="flex flex-col">
        <span className="font-medium tabular-nums">2,481</span>
        <span className="text-muted-foreground">Stars</span>
      </div>
      <Separator orientation="vertical" />
      <div className="flex flex-col">
        <span className="font-medium tabular-nums">164</span>
        <span className="text-muted-foreground">Forks</span>
      </div>
      <Separator orientation="vertical" />
      <div className="flex flex-col">
        <span className="font-medium tabular-nums">38</span>
        <span className="text-muted-foreground">Contributors</span>
      </div>
    </div>
  )
}

Label

Kinder sitzen in der Mitte der Linie, wobei die Linie den Platz auf beiden Seiten füllt.

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

export function SeparatorLabel() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-4">
      <Button>Continue with email</Button>
      <Separator>Or continue with</Separator>
      <div className="grid grid-cols-2 gap-2">
        <Button variant="outline">GitHub</Button>
        <Button variant="outline">Google</Button>
      </div>
    </div>
  )
}

Ausrichtung

align verschiebt das Label ans start oder end, was zu Abschnitts- und Datumsüberschriften passt. Icons werden an den Text angepasst.

import { IconCalendar } from "@tabler/icons-react"

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

export function SeparatorAlign() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-6">
      <Separator align="start">
        <IconCalendar aria-hidden="true" />
        Today
      </Separator>
      <Separator>Yesterday</Separator>
      <Separator align="end">Last week</Separator>
    </div>
  )
}

Vertikales Label

Ein vertikaler Separator mit Label hält den Text aufrecht und zeichnet die Linie darüber und darunter.

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

export function SeparatorVerticalLabel() {
  return (
    <div className="flex items-stretch gap-4">
      <div className="flex w-32 flex-col gap-2">
        <Button variant="outline">Upload file</Button>
        <Button variant="outline">Browse library</Button>
      </div>
      <Separator orientation="vertical">or</Separator>
      <div className="flex w-32 items-center justify-center rounded-lg border border-dashed p-4 text-center text-sm text-muted-foreground">
        Drop a file here
      </div>
    </div>
  )
}

Dekorativ

decorative verbirgt eine rein visuelle Linie vor Screenreadern, damit sie zwischen Zeilen, die für sich schon gut lesbar sind, keinen Separator ansagen.

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

export function SeparatorDecorative() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-3 rounded-xl border p-4 text-sm">
      <div className="flex items-center justify-between">
        <span className="text-muted-foreground">Subtotal</span>
        <span className="tabular-nums">$48.00</span>
      </div>
      <div className="flex items-center justify-between">
        <span className="text-muted-foreground">Shipping</span>
        <span className="tabular-nums">$4.00</span>
      </div>
      <Separator decorative />
      <div className="flex items-center justify-between font-medium">
        <span>Total</span>
        <span className="tabular-nums">$52.00</span>
      </div>
    </div>
  )
}

Inline

Nutze render, um ein <span> auszugeben, wo ein <div> nicht erlaubt ist, etwa in einem Absatz.

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

export function SeparatorRender() {
  return (
    <p className="text-sm text-muted-foreground">
      <span className="inline-flex h-4 items-center gap-2 align-middle">
        <span>Ada Park</span>
        <Separator orientation="vertical" decorative render={<span />} />
        <time dateTime="2026-10-05">Oct 5, 2026</time>
        <Separator orientation="vertical" decorative render={<span />} />
        <span>4 min read</span>
      </span>
    </p>
  )
}

Langer Inhalt

Lange Labels umbrechen, und ununterbrochene Zeichenketten werden getrennt, während auf jeder Seite ein kurzes Stück Linie sichtbar bleibt.

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

export function SeparatorLongContent() {
  return (
    <div className="flex w-full max-w-72 flex-col gap-6">
      <Separator>
        Messages before you joined the channel are kept for ninety days
      </Separator>
      <Separator align="start">
        https://hextaui.com/docs/components/separator/very-long-anchor
      </Separator>
    </div>
  )
}

Rechts nach links

Start und Ende folgen der Leserichtung.

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

export function SeparatorRtl() {
  return (
    <div dir="rtl" className="flex w-full max-w-sm flex-col gap-6 text-sm">
      <Separator align="start">اليوم</Separator>
      <div className="flex h-5 items-center gap-4">
        <a href="#">الوثائق</a>
        <Separator orientation="vertical" />
        <a href="#">المكونات</a>
        <Separator orientation="vertical" />
        <a href="#">المصدر</a>
      </div>
    </div>
  )
}

Barrierefreiheit

  • Ein einfacher Separator hat role="separator" und aria-orientation, wie ein <hr>.
  • Mit decorative erhält es role="none", und Screenreader überspringen es.
  • Ein Separator mit Label hat keine Rolle. Die Separator-Rolle würde seinen Text presentational machen, daher wird das Label als normaler Text gelesen.

API-Referenz

Gebaut auf dem Base UI Separator. Rendert ein <div> und akzeptiert dessen Attribute.

Separator

PropTypStandard
orientation
"horizontal" | "vertical""horizontal"
decorativeVerberge die Linie vor Screenreadern, wenn sie nur visuell ist.
booleanfalse
childrenEin in die Linie gezeichnetes Label. Lass es weg für eine einfache Linie.
ReactNode–
alignWo das Label auf der Linie sitzt.
"start" | "center" | "end""center"
className
string | (state) => string–
render
ReactElement | (props, state) => ReactElement<div>
AttributBeschreibung
data-slot="separator"Trennzeichen in CSS ansprechen.
data-orientation"horizontal" oder "vertical".
data-contentVorhanden, wenn der Separator ein Label hat.
data-alignDie Ausrichtung des Labels, wenn es ein Label gibt.
data-slot="separator-label"Das Element, das das Label umschließt.

Verwandt