UI

npm install @seedcli/ui

The UI module provides higher-level, composed UI components that build on top of the print module. Use it for polished, consistent CLI output.

Display a styled header:

seed.print.info(
  seed.ui.header('My CLI', {
    subtitle: 'v1.0.0',
    color: 'green',
  }),
)

Output:

╭───────────────────────────────────────╮
│                                       │
│     __  __          ____ _     ___    │
│    |  \/  |_   _   / ___| |   |_ _|   │
│    | |\/| | | | | | |   | |    | |    │
│    | |  | | |_| | | |___| |___ | |    │
│    |_|  |_|\__, |  \____|_____|___|   │
│            |___/                      │
│   v1.0.0                              │
│                                       │
╰───────────────────────────────────────╯

Header Options

Option	Type	Description
`subtitle`	`string`	Text below the title
`color`	`string`	Border and title color

Status

Show the result of an operation:

seed.print.info(seed.ui.status('Database migration', 'success'))
seed.print.info(seed.ui.status('Cache invalidation', 'fail'))
seed.print.info(seed.ui.status('CDN purge', 'skip'))
seed.print.info(seed.ui.status('DNS propagation', 'pending'))

Output:

✔ Database migration
✖ Cache invalidation
◌ CDN purge
… DNS propagation

Status States

State	Symbol	Description
`'success'`	`✔`	Completed successfully
`'fail'`	`✖`	Failed
`'skip'`	`◌`	Skipped
`'pending'`	`…`	Pending

List

Display a formatted list:

// Bullet list (default)
seed.print.info(seed.ui.list(['Install dependencies', 'Run migrations', 'Start server']))

// Numbered list
seed.print.info(
  seed.ui.list(['First step', 'Second step', 'Third step'], {
    ordered: true,
  }),
)

// Custom marker
seed.print.info(
  seed.ui.list(['Feature A', 'Feature B'], {
    marker: 'arrow',
  }),
)

List Options

Option	Type	Default	Description
`ordered`	`boolean`	`false`	Use numbers instead of bullets
`marker`	`'bullet' \| 'arrow' \| 'dash' \| 'number'`	`'bullet'`	Marker style

Countdown

Display a countdown timer:

await seed.ui.countdown(5, 'Deploying in')
// Writes "Deploying in 5s", updates in place every second, and clears the line when done.

The countdown updates in-place and clears the line when it reaches zero.

Re-exported Components

The UI module also re-exports these raw components from the print module for convenience:

// Raw re-exports from @seedcli/print. These do not print automatically.
seed.print.info(seed.ui.divider({ title: 'Section' }))
seed.print.info(seed.ui.keyValue({ Name: 'app', Version: '1.0.0' }))
seed.print.info(seed.ui.tree({ label: 'root', children: [...] }))

const progress = seed.ui.progress({ total: 3 })
seed.print.info(progress.update(1))

Example: Deployment Summary

seed.print.info(
  seed.ui.header('Deployment', { subtitle: 'Production', color: 'cyan' }),
)
seed.print.newline()

seed.print.keyValue({
  Environment: 'production',
  Region: 'us-east-1',
  Version: '2.1.0',
  Commit: 'abc123f',
})
seed.print.newline()

seed.print.divider({ title: 'Steps' })
seed.print.info(seed.ui.status('Build', 'success'))
seed.print.info(seed.ui.status('Test', 'success'))
seed.print.info(seed.ui.status('Deploy', 'success'))
seed.print.info(seed.ui.status('Health check', 'pending'))
seed.print.newline()

seed.print.box('Deployment complete!', {
  borderColor: 'green',
  borderStyle: 'round',
  padding: 1,
})

UI

On this page