Status Bar

A fixed-position status bar component for Ink 5. Renders a single-row bar at the bottom of your terminal UI with key hints, mode indicators, and context info — the kind you see in vim, htop, or nano.

Install

npm install @matthesketh/ink-status-bar

Usage

import React from 'react';
import { render, Text } from 'ink';
import { StatusBar } from '@matthesketh/ink-status-bar';

function App() {
  return (
    <>
      {/* your app content */}
      <StatusBar
        items={[
          { key: 'q', label: 'quit' },
          { key: 'Tab', label: 'switch view' },
          { key: '?', label: 'help' },
        ]}
      />
    </>
  );
}

render(<App />);

With slots

<StatusBar
  left={<Text bold>INSERT</Text>}
  center={<Text>index.ts</Text>}
  right={<Text>3/10</Text>}
  backgroundColor="blue"
  color="white"
/>

Key hints with a mode indicator

<StatusBar
  left={<Text bold>NORMAL</Text>}
  items={[
    { key: 'i', label: 'insert' },
    { key: ':', label: 'command' },
  ]}
  right={<Text>Ln 42, Col 8</Text>}
/>

Props

Prop	Type	Default	Description
items	KeyHint[]	undefined	Key hints displayed as [key] label pairs. Placed in left slot if no left prop, otherwise in center.
left	React.ReactNode	undefined	Content aligned to the left (e.g. mode indicator).
center	React.ReactNode	undefined	Content aligned to the center (e.g. filename).
right	React.ReactNode	undefined	Content aligned to the right (e.g. position info).
backgroundColor	string	'gray'	Background colour for the entire bar.
color	string	'white'	Default text colour.

KeyHint

interface KeyHint {
  key: string;    // e.g. "q", "Tab", "↑↓"
  label: string;  // e.g. "quit", "switch view"
}

Requirements

• Node.js >= 18
• React >= 18.0.0
• Ink >= 5.0.0