~/docs/custom/divider

▚Dividercustom

Horizontal rule with optional label

~/custom/divider

live

$ termino divider — border: ["top"] + flexGrow

──────────────── single ────────────────

════════════════ double ════════════════

━━━━━━━━━━━━━━━━ heavy ━━━━━━━━━━━━━━━━━

─────────────── rounded ────────────────

──────────────── inline ────────────────

········································

flank any section: ── groups ──

##API

A row of two flexGrow boxes with `border: ["top"]`, flanking an optional label. One of the few places OpenTUI's side-specific borders earn their keep.

properties

prop	type	default	description
label	string	-	Text centered on the rule
color	string	"#2f3449"	Rule color
labelColor	string	"#565f89"	Label color
style	single \| double \| rounded \| heavy	"single"	Border style of the rule
paddingX	number	1	Horizontal padding

##Keymap

~/keymap

—Display only

##Notes

▸Uses border side arrays (`border: ["top"]`) — available on every OpenTUI box.
▸Labels help group settings panels: `<Divider label="network" />`.

##Source

Real implementation — this is the code that runs in your terminal.

tsxdivider.tsx

1import { createElement as h } from "react";
2
3export interface DividerProps {
4  label?: string;
5  color?: string;
6  labelColor?: string;
7  style?: "single" | "double" | "rounded" | "heavy";
8  paddingX?: number;
9}
10
11export function Divider({
12  label,
13  color = "#2f3449",
14  labelColor = "#565f89",
15  style = "single",
16  paddingX = 1,
17}: Readonly<DividerProps>) {
18  const line = h("box", {
19    style: { flexGrow: 1, border: ["top"], borderStyle: style, borderColor: color },
20  });
21
22  if (!label) {
23    return h(
24      "box",
25      { flexDirection: "row", paddingLeft: paddingX, paddingRight: paddingX },
26      line,
27    );
28  }
29
30  return h(
31    "box",
32    { flexDirection: "row", alignItems: "center", paddingLeft: paddingX, paddingRight: paddingX },
33    line,
34    h("text", { fg: labelColor }, ` ${label} `),
35    line,
36  );
37}
38

← Grid

Flexbox rows of equal-width cells

QRCode →

QR code rendered from real bytes