InkUI
Components

Divider

Horizontal separator line with optional title. Four border styles.

A full-width horizontal separator. Supports an optional title and four character styles.

Live Preview
Divider · separator styles
default──────────────────────────────
double══════════════════════════════
bold━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
dashed┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄
~/my-cli — node v22● running

Installation

npx inkui add divider

Usage

import { Divider } from './components/ui/divider';
 
<Divider />
<Divider title="Settings" />

Examples

All styles

<Divider />                          // ────────────────────────────
<Divider style="double" />           // ════════════════════════════
<Divider style="dashed" />           // ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌
<Divider style="bold" />             // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━

With title

<Divider title="Configuration" />    // ── Configuration ───────────
<Divider title="Output" style="double" />

Fixed width

<Divider width={40} title="Results" />

Props

PropTypeDefaultDescription
titlestringundefinedOptional label in the middle of the line
style'single' | 'double' | 'dashed' | 'bold''single'Line character style
widthnumberterminal widthTotal width in columns
themeInkUIThemedarkThemeColor theme

Previous

KeyHint

Next

Header

On this page