$ Box

static output6 styles

Bordered panels and cards with 6 border styles, title positioning, and configurable padding.

# Preview

box demo

╭─ Server Status ────────────────╮
│                                  │
│  Status:  ● Online              │
│  Uptime:  12d 4h 32m           │
│  CPU:     23%                  │
│  Memory:  4.2 GB / 16 GB       │
│                                  │
╰──────────────────────────────────╯

Border styles:

╭──────╮  ┌──────┐  ╔══════╗  ┏━━━━━━┓  ┌┄┄┄┄┄┄┐  +------+
│round │  │single│  ║double║  ┃ heavy┃  ┆dashed┆  |ascii |
╰──────╯  └──────┘  ╚══════╝  ┗━━━━━━┛  └┄┄┄┄┄┄┘  +------+

# Usage

example.ts

import { Box, fg, style, colorize } from "@vr_patel/tui";

const box = new Box({
  title: "Server Status",
  borderStyle: "round",     // round | single | double | heavy | dashed | ascii
  borderColor: fg.cyan,
  padding: 1,
  paddingY: 1,
});

console.log(box.render(
  colorize("Status: ", fg.gray) + colorize("● Online", fg.green, style.bold) + "\n" +
  colorize("Uptime: ", fg.gray) + "12d 4h 32m" + "\n" +
  colorize("CPU:    ", fg.gray) + colorize("23%", fg.yellow)
));

# API

Prop	Type	Default	Description
title	string	undefined	Title shown in the top border
titleAlignment	"left" \| "center" \| "right"	"left"	Title position in the border
borderStyle	string \| BorderStyle	"round"	Border style name or custom characters
borderColor	string	fg.gray	ANSI color for the border
titleColor	string	fg.brightWhite + bold	ANSI color for the title
padding	number	1 (X) / 0 (Y)	Padding inside the box
paddingX	number	1	Horizontal padding
paddingY	number	0	Vertical padding
width	number	auto	Fixed width or auto-sized
dimBorder	boolean	false	Apply dim style to border