Components

import { Text } from "terminal-richjs";
 
const text = new Text("Hello, [bold]World[/bold]!");
console.print(text);

import { Panel } from "terminal-richjs";
 
const panel = new Panel("Content goes here", {
  title: "Panel Title",
  titleAlign: "left", // 'left' | 'center' | 'right'
  subtitle: "Subtitle",
  subtitleAlign: "right",
  box: "rounded",
  borderStyle: "cyan",
  padding: 1,
  expand: true,
});
 
console.print(panel);

// Create a panel that fits its content
const fitted = Panel.fit("Content", { title: "Fitted" });

import { Table } from "terminal-richjs";
 
const table = new Table({
  title: "My Table",
  box: "rounded",
  rowStyles: ["", "dim"], // Alternating row styles
  showHeader: true,
  showFooter: false,
  showLines: false,
  caption: "Table caption",
});
 
table.addColumn("Name", { justify: "left", style: "bold" });
table.addColumn("Age", { justify: "right" });
table.addColumn("City", { justify: "center" });
 
table.addRow("Alice", "30", "New York");
table.addRow("Bob", "25", "San Francisco");
 
table.addFooter("Total", "2", "-");
 
console.print(table);

import { Tree } from "terminal-richjs";
 
const tree = new Tree("📁 root", {
  guideStyle: "#6e7681 dim",
  hideRoot: false,
});
 
const folder1 = tree.add("📁 folder1");
folder1.add("📄 file1.txt");
folder1.add("📄 file2.txt");
 
const folder2 = tree.add("📁 folder2");
const subfolder = folder2.add("📁 subfolder");
subfolder.add("📄 file3.txt");
 
tree.add("📄 README.md");
 
console.print(tree);

import { Syntax } from "terminal-richjs";
 
const code = `function hello(name: string): void {
  console.log(\`Hello, \${name}!\`);
}`;
 
const syntax = new Syntax(code, "typescript", {
  theme: "monokai",
  lineNumbers: true,
  startLine: 1,
  highlightLines: [2],
  wordWrap: false,
});
 
console.print(syntax);
 
// Load from file
const fromFile = Syntax.fromPath("./src/index.ts", {
  theme: "dracula",
  lineNumbers: true,
});

import {
  ProgressBar,
  PercentageColumn,
  TimeElapsedColumn,
} from "terminal-richjs";
 
const bar = new ProgressBar(100, 75, {
  width: 40,
  completeStyle: "#61afef",
  finishedStyle: "#50fa7b bold",
  remainingStyle: "#3a3a3a dim",
  completeChar: "━",
  remainingChar: "━",
});
 
console.print(bar);
 
const pct = new PercentageColumn(0.75); // 75%
const elapsed = new TimeElapsedColumn(65000); // 1:05