Separator

Visually or semantically separates content.

bext/ui

An open-source component library.

Blog

Docs

Source

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14<div className="w-full max-w-md">
  <div>
    <div className="text-sm font-medium">bext/ui</div>
    <p className="text-sm text-muted-foreground">An open-source component library.</p>
  </div>
  <Separator className="my-4" />
  <div className="flex h-5 items-center gap-4 text-sm">
    <div>Blog</div>
    <Separator vertical />
    <div>Docs</div>
    <Separator vertical />
    <div>Source</div>
  </div>
</div>

Separator is a thin line (border-b or border-l depending on orientation) that visually separates sections.

Installation

Terminal

$ bext ui add separator

Copy and paste the following into src/components/ui/separator.tsx.

separator.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14<div className="w-full max-w-md">
  <div>
    <div className="text-sm font-medium">bext/ui</div>
    <p className="text-sm text-muted-foreground">An open-source component library.</p>
  </div>
  <Separator className="my-4" />
  <div className="flex h-5 items-center gap-4 text-sm">
    <div>Blog</div>
    <Separator vertical />
    <div>Docs</div>
    <Separator vertical />
    <div>Source</div>
  </div>
</div>

Usage

tsx

1
2
3
4
5
6
7
8
9import { Separator } from "@bext-stack/ui/primitives"

<Separator className="my-4" />

<div className="flex h-5 items-center gap-4">
  <div>Blog</div>
  <Separator vertical />
  <div>Docs</div>
</div>

Anatomy

<Separator vertical? decorative? />

API Reference

Separator

Prop	Type	Default	Description
vertical	boolean	—	If true: w-px h-full (vertical). Otherwise h-px w-full (horizontal, the default).
decorative	boolean	false	If true: role="none", the line is hidden from assistive technologies. Otherwise role="separator".
className	string	—	Extra classes on the line, for example a margin (my-4).

Accessibility

By default Separator sets role="separator", so assistive technologies announce it as a boundary between two groups of content. The vertical form also sets aria-orientation="vertical" (horizontal is the implicit value of the role).

For a line that is only visual, pass decorative: the element gets role="none" and no aria-orientation, and is ignored by assistive technologies. This differs from shadcn, where the separator is decorative by default.

Try it live Open in play

Edit this example live in the bext playground. It compiles and runs entirely in your browser.

src/app/page.tsx 1 file · react · runs in your browser

// A separator is a thin rule that divides content, either
// horizontally or vertically.
export default function Page() {
  return (
    <main style={{ maxWidth: 640, margin: "0 auto", padding: "48px 20px", fontFamily: "Inter, system-ui, sans-serif" }}>
      <h1 style={{ letterSpacing: "-0.02em", marginBottom: 4 }}>Separator</h1>
      <p style={{ color: "#64748b", marginTop: 0 }}>A visual divider between sections of content.</p>
      <div style={{ marginTop: 22, maxWidth: 360 }}>
        <div style={{ fontSize: 15, fontWeight: 600 }}>bext/ui</div>
        <div style={{ color: "#64748b", fontSize: 14, marginTop: 2 }}>An open-source component library.</div>
        <div style={{ height: 1, background: "#e2e8f0", margin: "16px 0" }} />
        <div style={{ display: "flex", alignItems: "center", gap: 0, fontSize: 14, height: 20 }}>
          <span>Docs</span>
          <span style={{ width: 1, alignSelf: "stretch", background: "#e2e8f0", margin: "0 14px" }} />
          <span>Source</span>
          <span style={{ width: 1, alignSelf: "stretch", background: "#e2e8f0", margin: "0 14px" }} />

The React idiom: same UI, for comparison.

← Select Sheet →

On This Page