Header

A full-width header bar typically shown at the top of a CLI application. Three visual styles to match your app's aesthetic.

Live Preview

Header · bar styles
◆ MyApp v2.1.0
════════════════════════════
┌──────────────────────────┐
│ Deploy Dashboard          │
└──────────────────────────┘

~/my-cli — node v22● running

Installation

npx inkui add header

Usage

import { Header } from './components/ui/header';
 
<Header title="MyApp" version="1.2.0" style="box" />

Examples

Box style (default)

<Header title="MyApp" version="1.2.0" style="box" subtitle="Deploy tool" />
// ┌─── MyApp v1.2.0 ─────────────────────────────────────────┐
// │ Deploy tool                                               │
// └───────────────────────────────────────────────────────────┘

Line style

<Header title="MyApp" version="1.2.0" style="line" />
// ══ MyApp v1.2.0 ════════════════════════════════════════════

Filled style

<Header title="MyApp" style="filled" />
// ██ MyApp ████████████████████████████████████████████████████

With subtitle

<Header
  title="Deployer"
  version="2.0.0"
  style="box"
  subtitle="Targeting: production · Region: us-east-1"
/>

Props

Prop	Type	Default	Description
`title`	`string`	—	Application name (required)
`version`	`string`	`undefined`	Version string — displayed as `v{version}`
`subtitle`	`string`	`undefined`	Second line shown inside box or below line
`style`	`'box' \| 'line' \| 'filled'`	`'box'`	Visual style
`align`	`'left' \| 'center'`	`'left'`	Title alignment
`theme`	`InkUITheme`	`darkTheme`	Color theme

On this page