658
Sponsor

Divider

PreviousNext

Horizontal or vertical divider / rule

InkOpenTUI
Terminal

Installation

$ pnpm dlx shadcn@latest add @termcn/opentui/divider

Usage

import { Divider } from "@/components/ui/divider";
<Divider label="Section" />

Examples

Vertical rule and label styling

Use dividerChar and height for vertical rules; titlePadding and labelColor adjust the labeled horizontal variant.

Terminal
import { Box } from "@/components/ui/box";
import { Divider } from "@/components/ui/divider";

export function DividerCustom() {
  return (
    <Box flexDirection="column" gap={1}>
      <text fg="#666">Vertical dividerChar</text>
      <Box flexDirection="row" gap={1}>
        <Divider orientation="vertical" dividerChar=":" height={5} />
        <text>Beside rule</text>
      </Box>
      <Divider
        label="Labeled"
        titlePadding={2}
        labelColor="cyan"
        color="gray"
      />
    </Box>
  );
}

API Reference

Divider

PropTypeDefault
variant"single" | "double" | "bold""single"
orientation"horizontal" | "vertical""horizontal"
colorstring-
labelstring-
labelColorstring-
dividerCharstring-
titlePaddingnumber1
paddingnumber0
heightnumber1
widthnumber | "auto""auto"

On horizontal dividers, the rule uses OpenTUI border segments; dividerChar applies to vertical orientation.