Overview

Display focused content on top of the UI.

Import

import { Modal } from 'nikcli-tui';

Usage

new Modal({ parent: screen, title: 'Action', content: 'Hello', closable: true });

Live Preview

Run Locally

npm run tsx:core-gallery

Props

  • title?: string — Window label.
  • content?: string — Modal content body.
  • width?: string | number — Default 70%.
  • height?: string | number — Default 60%.
  • closable?: boolean — Enables Esc/q handlers.
  • onClose?: () => void — Called on close.
  • BaseProps: overlay fills screen.

Methods

  • setContent(text), setTitle(text), setDimensions(w, h).
  • show(), hide(), close().
  • setClosable(bool), addKeyHandler(keys, fn), removeKeyHandler(keys).

Keyboard

  • Esc, q: close (if closable).

Installation

npm i nikcli-tui

Import

import { Modal } from 'nikcli-tui';

Quick Start

const m = new Modal({ parent: screen, title: 'Confirm', content: 'Are you sure?', closable: true });
m.show();

Production Examples

const modal = new Modal({ parent: screen, title: 'Action' });
setTimeout(() => modal.close(), 1200);

Best Practices

  • Evita modali annidati; preferisci step sequenziali con Stepper o Tabs.