UI Components

npm install @termuijs/ui

import { Select } from '@termuijs/ui'
import { App } from '@termuijs/core'
 
const select = new Select(
    [
{ label: 'Development', value: 'dev' },
{ label: 'Staging',     value: 'staging' },
{ label: 'Production',  value: 'prod', disabled: true },
    ],
    {
label: 'Choose environment:',
onSelect: (option, index) => console.log('Picked:', option.value),
    }
)
 
const app = new App(select, { fullscreen: true })
app.events.on('key', (e) => {
    if (e.key === 'up')     select.selectPrev()
    if (e.key === 'down')   select.selectNext()
    if (e.key === 'enter')  select.confirm()
    if (e.key === 'escape') select.close()
})
await app.mount()

import { MultiSelect } from '@termuijs/ui'
 
const multi = new MultiSelect(
    [
{ label: '@termuijs/core',    value: 'core' },
{ label: '@termuijs/widgets', value: 'widgets' },
{ label: '@termuijs/motion',  value: 'motion' },
{ label: '@termuijs/tss',     value: 'tss' },
    ],
    {
label: 'Select packages to install:',
onSubmit: (selected) => console.log('Chosen:', selected),
    }
)

import { Tabs } from '@termuijs/ui'
import { Text } from '@termuijs/widgets'
import { App } from '@termuijs/core'
 
const tabs = new Tabs(
    [
{ label: 'Overview', content: new Text('Overview content here') },
{ label: 'Logs',     content: new Text('Log output') },
{ label: 'Metrics',  content: new Text('Metrics data') },
    ],
)
 
const app = new App(tabs, { fullscreen: true })
app.events.on('key', (e) => {
    if (e.key === 'left')  tabs.prevTab()
    if (e.key === 'right') tabs.nextTab()
})
await app.mount()

import { Modal } from '@termuijs/ui'
import { Text } from '@termuijs/widgets'
 
const modal = new Modal({
    title: 'Delete item?',
    width: 40,
    height: 8,
})
modal.setContent(new Text('This action cannot be undone.'))
 
// Show the modal when user presses 'd'
app.events.on('key', (e) => {
    if (e.key === 'd')      modal.show()
    if (e.key === 'escape') modal.hide()
})

import { Tree } from '@termuijs/ui'
import { App } from '@termuijs/core'
 
const tree = new Tree(
    [
{
label: 'src/',
expanded: true,
children: [
{
label: 'components/',
children: [
{ label: 'Button.tsx' },
{ label: 'Input.tsx' },
],
},
{ label: 'index.ts' },
],
},
    ],
    {
onSelect: (node, path) => console.log('Selected:', node.label),
    }
)
 
const app = new App(tree, { fullscreen: true })
app.events.on('key', (e) => {
    if (e.key === 'up')    tree.selectPrev()
    if (e.key === 'down')  tree.selectNext()
    if (e.key === 'enter') tree.confirm()
    if (e.key === 'space') tree.toggleExpand()
})
await app.mount()

import { Toast } from '@termuijs/ui'
 
const toasts = new Toast({
    position: 'bottom-right',
    durationMs: 3000,
    maxVisible: 5,
})
 
// Push notifications from anywhere
toasts.success('File saved')
toasts.error('Network error')
toasts.warning('Disk usage at 90%')
toasts.info('Syncing...')

import { Form } from '@termuijs/ui'
import { App } from '@termuijs/core'
 
const form = new Form(
    [
{ name: 'user', label: 'Username', required: true },
{ name: 'pass', label: 'Password', required: true, masked: true },
    ],
    {
onSubmit: (values) => {
console.log('Submitted:', values)
// values is Map<string, string>
},
    }
)
 
const app = new App(form, { fullscreen: true })
app.events.on('key', (e) => {
    if (e.key === 'tab')   form.nextField()
    if (e.key === 'enter') form.submit()
})
await app.mount()

import { CommandPalette } from '@termuijs/ui'
 
const palette = new CommandPalette(
    [
{ id: 'open',  label: 'Open file…',    action: openFile },
{ id: 'save',  label: 'Save',           shortcut: 'Ctrl+S', action: saveFile },
{ id: 'quit',  label: 'Quit',           shortcut: 'Ctrl+Q', action: () => app.exit() },
{ id: 'theme', label: 'Switch theme…',  action: pickTheme },
    ],
    { placeholder: 'Type a command…' }
)
 
// Toggle with Ctrl+P
app.events.on('key', (e) => {
    if (e.ctrl && e.key === 'p') palette.toggle()
})

import { ConfirmDialog } from '@termuijs/ui'
 
const dialog = new ConfirmDialog({
    title: 'Delete this item?',
    message: 'This cannot be undone.',
    confirmLabel: 'Delete',
    cancelLabel: 'Cancel',
    onConfirm: () => deleteItem(),
    onCancel: () => console.log('Cancelled'),
})

import { Divider } from '@termuijs/ui'
 
// Horizontal divider with a label
const divider = new Divider({ label: 'Settings', style: 'dashed' })