Banner Utilities

Create stunning visual banners, boxes, and separators for your CLI applications.

Basic Banners

log.banner(text, options?)

Create a boxed banner around your text:

import { log } from 'logluxe';

// Simple banner
log.banner('Hello World');

Simple Banner

╔═══════════════╗

║ Hello World ║

╚═══════════════╝

🎮 Try Banners

log.info('╔═══════════════╗'); log.info('║ Hello World ║'); log.info('╚═══════════════╝');

Banner with Title

log.banner('Application started successfully!', {
  title: 'SUCCESS'
});

Banner with Title

╔═══════════════════════════════════════╗

║ SUCCESS ║

║ Application started successfully! ║

╚═══════════════════════════════════════╝

Banner Styles

Different Border Styles

// Double line (default)
log.banner('Double Border', { style: 'double' });

// Single line
log.banner('Single Border', { style: 'single' });

// Round corners
log.banner('Round Corners', { style: 'round' });

// Heavy borders
log.banner('Heavy Border', { style: 'heavy' });

// ASCII (compatible everywhere)
log.banner('ASCII Border', { style: 'ascii' });

Border Styles

╔════════════════╗ // double

║ Double Border ║

╚════════════════╝

┌────────────────┐ // single

│ Single Border │

└────────────────┘

╭────────────────╮ // round

│ Round Corners │

╰────────────────╯

┏━━━━━━━━━━━━━━━━┓ // heavy

┃ Heavy Border ┃

┗━━━━━━━━━━━━━━━━┛

+----------------+ // ascii

| ASCII Border |

+----------------+

🎮 Try Border Styles

log.info('╔════════════════╗'); log.info('║ Double Border ║'); log.info('╚════════════════╝'); log.info(''); log.info('╭────────────────╮'); log.info('│ Round Corners │'); log.info('╰────────────────╯');

Colored Banners

Applying Colors

// Single color banner
log.banner('Error occurred!', { color: 'red' });

// Success banner
log.banner('Build Successful!', { color: 'green', style: 'round' });

// Warning banner
log.banner('Memory usage at 80%', { color: 'yellow', title: 'WARNING' });

Success Banner

╭──────────────────────╮

│ Build Successful! │

╰──────────────────────╯

Warning Banner

╔═════════════════════════╗

║ WARNING ║

║ Memory usage at 80% ║

╚═════════════════════════╝

Error Banner

┏━━━━━━━━━━━━━━━━━━━━━━━┓

┃ ERROR ┃

┃ Connection failed ┃

┗━━━━━━━━━━━━━━━━━━━━━━━┛

🎮 Try Colored Banners

log.success('╭──────────────────────╮'); log.success('│ Build Successful! │'); log.success('╰──────────────────────╯'); log.info(''); log.warn('╔═════════════════════════╗'); log.warn('║ WARNING ║'); log.warn('║ Memory usage at 80% ║'); log.warn('╚═════════════════════════╝');

Multi-line Banners

Multiple Lines of Text

log.banner([
  'My Awesome Application',
  'Version 2.0.0',
  '',
  'Author: John Doe',
  'License: MIT'
], {
  title: 'ABOUT'
});

Multi-line Banner

╔════════════════════════════╗

║ ABOUT ║

║ ║

║ My Awesome Application ║

║ Version 2.0.0 ║

║ ║

║ Author: John Doe ║

║ License: MIT ║

╚════════════════════════════╝

Dividers

log.divider(char?, width?)

Create simple dividers:

// Default divider
log.divider();

// Custom character
log.divider('═');

// Custom width
log.divider('-', 20);

Dividers

────────────────────────────────────────

════════════════════════════════════════

--------------------

Colored Dividers

log.color('─'.repeat(40), 'cyan');
log.gradient('═'.repeat(40), ['red', 'blue']);
log.rainbow('━'.repeat(40));

Colored Dividers

────────────────────────────────────────

════════════════════════════════════════

━━━━━━━━━━━━━━━━━━━━━━━━━━

🎮 Try Dividers

log.info('────────────────────────────────────────'); log.success('════════════════════════════════════════'); log.warn('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');

Practical Examples

Application Startup Banner

function printStartupBanner(name, version, author) {
  log.banner([
    '',
    `  🚀 ${name}`,
    `     v${version}`,
    '',
    `  Created by ${author}`,
    ''
  ], {
    style: 'round',
    gradient: ['#667eea', '#764ba2']
  });
}

printStartupBanner('My App', '1.0.0', 'John Doe');

Startup Banner

╭─────────────────────────╮

│ │

│ 🚀 My App │

│ v1.0.0 │

│ │

│ Created by John Doe │

│ │

╰─────────────────────────╯

Section Headers

function sectionHeader(title) {
  log.divider('═');
  log.success(`  ${title.toUpperCase()}  `);
  log.divider('═');
}

sectionHeader('Configuration');
log.info('Loading config files...');
log.success('Config loaded');

Section Example

════════════════════════════════════════

✔ CONFIGURATION

════════════════════════════════════════

ℹLoading config files...

✔Config loaded

🎮 Try Section Headers

log.info('════════════════════════════════════════'); log.success(' CONFIGURATION '); log.info('════════════════════════════════════════'); log.info('Loading config files...'); log.success('Config loaded');

Build Summary

function buildSummary(stats) {
  log.banner([
    '',
    '  BUILD COMPLETE  ',
    '',
    `  Files: ${stats.files}`,
    `  Size: ${stats.size}`,
    `  Time: ${stats.time}`,
    ''
  ], {
    color: 'green',
    style: 'round'
  });
}

buildSummary({ files: 42, size: '1.2 MB', time: '3.5s' });

Build Summary

╭───────────────────────╮

│ │

│ BUILD COMPLETE │

│ │

│ Files: 42 │

│ Size: 1.2 MB │

│ Time: 3.5s │

│ │

╰───────────────────────╯

---

Next: Configuration →