Separator

Visually or semantically separates content.

bext/ui

An open-source component library.

Blog

Docs

Source

tsx

1
2<Separator className="my-4" />
<Separator vertical />

Separator — trait fin (border-b ou border-l selon orientation) pour séparer visuellement des sections.

Installation

Terminal

$ bext ui add separator

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? />

API Reference

Separator

Prop	Type	Default	Description
vertical	boolean	—	Si true : w-px h-full (vertical). Sinon h-px w-full (horizontal, défaut).
className	string	—	undefined

Accessibility

role="separator" par défaut. Purement décoratif — les AT le mentionnent brièvement mais sans importance.

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