boxen
Create boxes in the terminal
Install
npm install boxen
Usage
import boxen from 'boxen';
console.log(boxen('unicorn', {padding: 1}));
/*
┌─────────────┐
│ │
│ unicorn │
│ │
└─────────────┘
*/
console.log(boxen('unicorn', {padding: 1, margin: 1, borderStyle: 'double'}));
/*
╔═════════════╗
║ ║
║ unicorn ║
║ ║
╚═════════════╝
*/
console.log(boxen('unicorns love rainbows', {title: 'magical', titleAlignment: 'center'}));
/*
┌────── magical ───────┐
│unicorns love rainbows│
└──────────────────────┘
*/
API
boxen(text, options?)
text
Type: string
Text inside the box.
options
Type: object
borderColor
Type: string
\
Values: 'black'
'red'
'green'
'yellow'
'blue'
'magenta'
'cyan'
'white'
'gray'
or a hex value like '#ff0000'
Color of the box border.
borderStyle
Type: string | object
\
Default: 'single'
\
Values:
'single'
┌───┐ │foo│ └───┘
'double'
╔═══╗ ║foo║ ╚═══╝
'round'
('single'
sides with round corners)╭───╮ │foo│ ╰───╯
'bold'
┏━━━┓ ┃foo┃ ┗━━━┛
'singleDouble'
('single'
on top and bottom,'double'
on right and left)╓───╖ ║foo║ ╙───╜
'doubleSingle'
('double'
on top and bottom,'single'
on right and left)╒═══╕ │foo│ ╘═══╛
'classic'
+---+ |foo| +---+
'arrow'
↘↓↓↓↙ →foo← ↗↑↑↑↖
'none'
foo
Style of the box border.
Can be any of the above predefined styles or an object with the following keys:
{
topLeft: '+',
topRight: '+',
bottomLeft: '+',
bottomRight: '+',
top: '-',
bottom: '-',
left: '|',
right: '|'
}
dimBorder
Type: boolean
\
Default: false
Reduce opacity of the border.
title
Type: string
Display a title at the top of the box. If needed, the box will horizontally expand to fit the title.
Example:
console.log(boxen('foo bar', {title: 'example'}));
/*
┌ example ┐
│foo bar │
└─────────┘
*/
titleAlignment
Type: string
\
Default: 'left'
Align the title in the top bar.
Values:
'left'
/* ┌ example ──────┐ │foo bar foo bar│ └───────────────┘ */
'center'
/* ┌─── example ───┐ │foo bar foo bar│ └───────────────┘ */
'right'
/* ┌────── example ┐ │foo bar foo bar│ └───────────────┘ */
width
Type: number
Set a fixed width for the box.
Note: This disables terminal overflow handling and may cause the box to look broken if the user's terminal is not wide enough.
import boxen from 'boxen';
console.log(boxen('foo bar', {width: 15}));
// ┌─────────────┐
// │foo bar │
// └─────────────┘
height
Type: number
Set a fixed height for the box.
Note: This option will crop overflowing content.
import boxen from 'boxen';
console.log(boxen('foo bar', {height: 5}));
// ┌───────┐
// │foo bar│
// │ │
// │ │
// └───────┘
fullscreen
Type: boolean | (width: number, height: number) => [width: number, height: number]
Whether or not to fit all available space within the terminal.
Pass a callback function to control box dimensions:
import boxen from 'boxen';
console.log(boxen('foo bar', {
fullscreen: (width, height) => [width, height - 1],
}));
padding
Type: number | object
\
Default: 0
Space between the text and box border.
Accepts a number or an object with any of the top
, right
, bottom
, left
properties. When a number is specified, the left/right padding is 3 times the top/bottom to make it look nice.
margin
Type: number | object
\
Default: 0
Space around the box.
Accepts a number or an object with any of the top
, right
, bottom
, left
properties. When a number is specified, the left/right margin is 3 times the top/bottom to make it look nice.
float
Type: string
\
Default: 'left'
\
Values: 'right'
'center'
'left'
Float the box on the available terminal screen space.
backgroundColor
Type: string
\
Values: 'black'
'red'
'green'
'yellow'
'blue'
'magenta'
'cyan'
'white'
'gray'
or a hex value like '#ff0000'
Color of the background.
textAlignment
Type: string
\
Default: 'left'
\
Values: 'left'
'center'
'right'
Align the text in the box based on the widest line.