labsUI

Separator

Server-safe hairline, horizontal or vertical, decorative by default, with an optional centered label like "or".

npx @kznlabs/labsui add separator

labsUI

Clean primitives, smooth springs.

Docs
Source
llms.txt
or
import { Separator } from "@/components/ui/separator";export function ProfileLinks() {  return (    <div>      <div className="flex h-5 items-center gap-3 text-sm">        <a href="/docs">Docs</a>        <Separator orientation="vertical" />        <a href="/blog">Blog</a>      </div>      <Separator label="or" className="my-4" />    </div>  );}

<Separator>

  • decorativedefault true
    boolean

    Purely visual (default). Set false when the line separates content for assistive tech.

  • label
    string

    Centered text on the line, e.g. "or". Horizontal only.

  • orientationdefault "horizontal"
    "horizontal" | "vertical"

    Direction of the line.

PropTypeDefault
decorative

Purely visual (default). Set false when the line separates content for assistive tech.

booleantrue
label

Centered text on the line, e.g. "or". Horizontal only.

string—
orientation

Direction of the line.

"horizontal" | "vertical""horizontal"

Also accepts every <div> prop.

* required. Every component also takes className.