or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-cli-boxes

Boxes for use in the terminal

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/cli-boxes@4.0.x

To install, run

npx @tessl/cli install tessl/npm-cli-boxes@4.0.0

index.mddocs/

CLI Boxes

CLI Boxes provides a comprehensive collection of Unicode and ASCII box drawing characters for creating terminal user interfaces and visual layouts in command-line applications. It offers eight distinct box styles including single-line, double-line, rounded corners, bold lines, and mixed styles, with each box style providing all necessary border characters as structured JSON data.

Package Information

  • Package Name: cli-boxes
  • Package Type: npm
  • Language: JavaScript with TypeScript definitions
  • Installation: npm install cli-boxes

Core Imports

import cliBoxes from 'cli-boxes';

For CommonJS:

const cliBoxes = require('cli-boxes');

For TypeScript with type definitions:

import cliBoxes, { type BoxStyle, type Boxes } from 'cli-boxes';

Basic Usage

import cliBoxes from 'cli-boxes';

// Access a box style
console.log(cliBoxes.single);
// {
//   topLeft: '┌',
//   top: '─',
//   topRight: '┐',
//   right: '│',
//   bottomRight: '┘',
//   bottom: '─',
//   bottomLeft: '└',
//   left: '│'
// }

// Use characters to draw a box
const box = cliBoxes.single;
const content = "Hello World";
const width = content.length + 2;

console.log(box.topLeft + box.top.repeat(width) + box.topRight);
console.log(box.left + " " + content + " " + box.right);
console.log(box.bottomLeft + box.bottom.repeat(width) + box.bottomRight);
// ┌─────────────┐
// │ Hello World │
// └─────────────┘

Capabilities

Box Styles

Eight distinct box styles are available, each providing a complete set of border characters for drawing boxes in the terminal.

declare const cliBoxes: Boxes;

// Default export provides access to all box styles
export default cliBoxes;

Single-Line Style

Unicode single-line box drawing characters.

cliBoxes.single: BoxStyle;

Visual example:

┌────┐
│    │
└────┘

Double-Line Style

Unicode double-line box drawing characters.

cliBoxes.double: BoxStyle;

Visual example:

╔════╗
║    ║
╚════╝

Rounded Style

Unicode box drawing characters with rounded corners.

cliBoxes.round: BoxStyle;

Visual example:

╭────╮
│    │
╰────╯

Bold Style

Unicode bold/thick box drawing characters.

cliBoxes.bold: BoxStyle;

Visual example:

┏━━━━┓
┃    ┃
┗━━━━┛

Single-Double Mixed Style

Mixed style with single horizontal and double vertical lines.

cliBoxes.singleDouble: BoxStyle;

Visual example:

╓────╖
║    ║
╙────╜

Double-Single Mixed Style

Mixed style with double horizontal and single vertical lines.

cliBoxes.doubleSingle: BoxStyle;

Visual example:

╒════╕
│    │
╘════╛

Classic ASCII Style

ASCII-only box drawing characters for maximum compatibility.

cliBoxes.classic: BoxStyle;

Visual example:

+----+
|    |
+----+

Arrow Style

Arrow-based box drawing characters.

cliBoxes.arrow: BoxStyle;

Visual example:

↘↓↓↓↓↙
→    ←
↗↑↑↑↑↖

Types

/**
 * Style of the box border containing all eight border characters
 */
interface BoxStyle {
  readonly topLeft: string;
  readonly top: string;
  readonly topRight: string;
  readonly right: string;
  readonly bottomRight: string;
  readonly bottom: string;
  readonly bottomLeft: string;
  readonly left: string;
}

/**
 * All available box styles
 */
interface Boxes {
  readonly single: BoxStyle;
  readonly double: BoxStyle;
  readonly round: BoxStyle;
  readonly bold: BoxStyle;
  readonly singleDouble: BoxStyle;
  readonly doubleSingle: BoxStyle;
  readonly classic: BoxStyle;
  readonly arrow: BoxStyle;
}