@clack/prompts

Effortlessly build beautiful command-line apps 🪄 Try the demo

!clack-prompt

---

@clack/prompts is an opinionated, pre-styled wrapper around @clack/core.

- 🤏 80% smaller than other options
- 💎 Beautiful, minimal UI
- ✅ Simple API
- 🧱 Comes with text, confirm, select, multiselect, and spinner components

Basics

$3

The intro and outro functions will print a message to begin or end a prompt session, respectively.

``js
import { intro, outro } from '@clack/prompts';

intro(create-my-app);
// Do stuff
outro(You're all set!);
`

$3

The isCancel function is a guard that detects when a user cancels a question with CTRL + C. You should handle this situation for each prompt, optionally providing a nice cancellation message with the cancel utility.

`js
import { isCancel, cancel, text } from '@clack/prompts';

const value = await text({
message: 'What is the meaning of life?',
});

if (isCancel(value)) {
cancel('Operation cancelled.');
process.exit(0);
}
`

Components

$3

The text component accepts a single line of text.

`js
import { text } from '@clack/prompts';

const meaning = await text({
message: 'What is the meaning of life?',
placeholder: 'Not sure',
initialValue: '42',
validate(value) {
if (value.length === 0) return Value is required!;
},
});
`

$3

The confirm component accepts a yes or no answer. The result is a boolean value of true or false.

`js
import { confirm } from '@clack/prompts';

const shouldContinue = await confirm({
message: 'Do you want to continue?',
});
`

$3

The select component allows a user to choose one value from a list of options. The result is the value prop of a given option.

`js
import { select } from '@clack/prompts';

const projectType = await select({
message: 'Pick a project type.',
options: [
{ value: 'ts', label: 'TypeScript' },
{ value: 'js', label: 'JavaScript', disabled: true },
{ value: 'coffee', label: 'CoffeeScript', hint: 'oh no' },
],
});
`

$3

The multiselect component allows a user to choose many values from a list of options. The result is an array with all selected value props.

`js
import { multiselect } from '@clack/prompts';

const additionalTools = await multiselect({
message: 'Select additional tools.',
options: [
{ value: 'eslint', label: 'ESLint', hint: 'recommended' },
{ value: 'prettier', label: 'Prettier', disabled: true },
{ value: 'gh-action', label: 'GitHub Action' },
],
required: false,
});
`

It is also possible to select multiple items arranged into hierarchy by using groupMultiselect:

`js
import { groupMultiselect } from '@clack/prompts';

const basket = await groupMultiselect({
message: 'Select your favorite fruits and vegetables:',
options: {
fruits: [
{ value: 'apple', label: 'apple' },
{ value: 'banana', label: 'banana' },
{ value: 'cherry', label: 'cherry' },
],
vegetables: [
{ value: 'carrot', label: 'carrot' },
{ value: 'spinach', label: 'spinach' },
{ value: 'potato', label: 'potato' },
]
}
});
`

$3

The spinner component surfaces a pending action, such as a long-running download or dependency installation.

`js
import { spinner } from '@clack/prompts';

const s = spinner();
s.start('Installing via npm');
// Do installation here
s.stop('Installed via npm');
`

$3

The progress component extends the spinner component to add a progress bar to visualize the progression of an action.

`js
import { progress } from '@clack/prompts';

const p = progress({ max: 10 });
p.start('Downloading archive');
// Do download here
p.advance(3, 'Downloading (30%)');
// ...
p.advance(8, 'Downloading (80%)');
// ...
p.stop('Archive downloaded');
`

Utilities

$3

Grouping prompts together is a great way to keep your code organized. This accepts a JSON object with a name that can be used to reference the group later. The second argument is an optional but has a onCancel callback that will be called if the user cancels one of the prompts in the group.

`js
import * as p from '@clack/prompts';

const group = await p.group(
{
name: () => p.text({ message: 'What is your name?' }),
age: () => p.text({ message: 'What is your age?' }),
color: ({ results }) =>
p.multiselect({
message: What is your favorite color ${results.name}?,
options: [
{ value: 'red', label: 'Red' },
{ value: 'green', label: 'Green' },
{ value: 'blue', label: 'Blue' },
],
}),
},
{
// On Cancel callback that wraps the group
// So if the user cancels one of the prompts in the group this function will be called
onCancel: ({ results }) => {
p.cancel('Operation cancelled.');
process.exit(0);
},
}
);

console.log(group.name, group.age, group.color);
`

$3

Execute multiple tasks in spinners.

`js
import { tasks } from '@clack/prompts';

await tasks([
{
title: 'Installing via npm',
task: async (message) => {
// Do installation here
return 'Installed via npm';
},
},
]);
`

$3

`js
import { log } from '@clack/prompts';

log.info('Info!');
log.success('Success!');
log.step('Step!');
log.warn('Warn!');
log.error('Error!');
log.message('Hello, World', { symbol: color.cyan('~') });
`

$3

When interacting with dynamic LLMs or other streaming message providers, use the stream APIs to log messages from an iterable, even an async one.

`js
import { stream } from '@clack/prompts';

stream.info((function *() { yield 'Info!'; })());
stream.success((function *() { yield 'Success!'; })());
stream.step((function *() { yield 'Step!'; })());
stream.warn((function *() { yield 'Warn!'; })());
stream.error((function *() { yield 'Error!'; })());
stream.message((function *() { yield 'Hello'; yield ", World" })(), { symbol: color.cyan('~') });
`

!clack-log-prompts

$3

When executing a sub-process or a similar sub-task, taskLog can be used to render the output continuously and clear it at the end if it was successful.

`js
import { taskLog } from '@clack/prompts';

const log = taskLog({
title: 'Running npm install'
});

for await (const line of npmInstall()) {
log.message(line);
}

if (success) {
log.success('Done!');
} else {
log.error('Failed!');
}
``