Satin #

A terminal UI library for Dart inspired by Charm's Lipgloss. Build beautiful command-line interfaces with styled text, borders, tables, and reusable components.

Features #

• Text styling (colors, bold, italic, underline)
• Borders with proper T-junction characters for tables
• Layout management (padding, margins, alignment)
• Pre-built components (title boxes, status messages, progress bars, lists)
• Pure Dart implementation with no external dependencies

Installation #

Add to your pubspec.yaml:

dependencies:
  satin: ^1.0.0

Quick Example #

import 'package:satin/satin.dart';

void main() {
  // Basic text styling
  print(style()
      .color(TerminalColor.brightBlue)
      .makeBold()
      .render('Hello, World!'));
  
  // Title box with border
  print(titleBox(
    'Processing Data',
    icon: '⚡',
    titleStyle: style().color(TerminalColor.cyan).makeBold(),
    borderColor: TerminalColor.gray,
    width: 30,
  ).render());
  
  // Status messages
  print(statusBox('Operation completed', StatusType.success).render());
  print(statusBox('Warning: Check configuration', StatusType.warning).render());
  
  // Progress bar
  print(progressBox('Loading', 0.75).render());
  
  // Lists
  print(listBox([
    'Initialize project',
    'Install dependencies',
    'Run tests',
  ], title: 'Next steps:').render());
  
  // Tables
  print(table(
    headers: ['Name', 'Status', 'Progress'],
    rows: [
      ['Task 1', 'Complete', '100%'],
      ['Task 2', 'Running', '75%'],
      ['Task 3', 'Pending', '0%'],
    ],
  ).render());
}

Components #

TitleBox #

Create bordered boxes with titles and icons:

titleBox(
  'My Application',
  subtitle: 'v1.0.0',
  icon: '◆',
  border: Border.rounded,
  width: 40,
)

StatusBox #

Display status messages with appropriate icons:

statusBox('File saved successfully', StatusType.success)
statusBox('Connection failed', StatusType.error)
statusBox('Processing...', StatusType.loading)

Table #

Render tables with proper borders and styling:

table(
  headers: ['ID', 'Name', 'Value'],
  rows: [['1', 'Item A', '100'], ['2', 'Item B', '200']],
  border: Border.thick,
  borderColor: TerminalColor.brightBlue,
)

Colors #

Use predefined colors or create custom ones:

// Predefined colors
TerminalColor.red
TerminalColor.brightGreen
TerminalColor.cyan

// Custom colors
TerminalColor.hex('#FF6B6B')
TerminalColor.rgb(255, 107, 107)
TerminalColor.hsl(0, 1.0, 0.7)

Extending Components #

Create custom components by extending BaseComponent:

class CustomBox extends BaseComponent {
  final String title;
  final String content;
  
  const CustomBox({required this.title, required this.content});
  
  @override
  String render() {
    return titleBox(
      title,
      titleStyle: style().color(TerminalColor.brightWhite).makeBold(),
      border: Border.thick,
    ).render() + '\n' + content;
  }
}