Terminal
Installation
$ pnpm dlx shadcn@latest add @termcn/ink/setup-flow
Usage
import { SetupFlow } from "@/components/ui/setup-flow";<SetupFlow title="create-app">
<SetupFlow.Badge label="v1.0.0" />
<SetupFlow.Step status="done">Project name set to my-app</SetupFlow.Step>
<SetupFlow.Step status="done">Template selected: React</SetupFlow.Step>
<SetupFlow.Step status="active">Installing dependencies...</SetupFlow.Step>
<SetupFlow.MultiSelect
label="Select features"
hint="space to toggle, enter to confirm"
options={[
{ value: "ts", label: "TypeScript" },
{ value: "eslint", label: "ESLint", description: "Code linting" },
{ value: "prettier", label: "Prettier", description: "Formatting" },
]}
onSubmit={(values) => console.log(values)}
/>
</SetupFlow>API Reference
SetupFlow
| Prop | Type | Default |
|---|---|---|
title | string | - |
titleFont | "block" | "simple" | "shade" | "slim" | "block" |
titleColor | string | "#888888" |
titleColorAlt | string | - |
connectorChar | string | "│" |
connectorColor | string | - |
children | ReactNode | required |
SetupFlow.Badge
| Prop | Type | Default |
|---|---|---|
label | string | required |
bg | string | "cyan" |
color | string | "black" |
SetupFlow.Step
| Prop | Type | Default |
|---|---|---|
icon | string | - |
iconColor | string | - |
status | "done" | "active" | "pending" | "success" | "error" | "done" |
children | ReactNode | required |
SetupFlow.Spinner
| Prop | Type | Default |
|---|---|---|
label | string | required |
onComplete | () => void | - |
SetupFlow.MultiSelect
| Prop | Type | Default |
|---|---|---|
label | string | required |
hint | string | - |
options | { value: string; label: string; description?: string }[] | required |
values | string[] | - |
onChange | (values: string[]) => void | - |
onSubmit | (values: string[]) => void | - |
checkedChar | string | "■" |
uncheckedChar | string | "□" |
checkedColor | string | "green" |
Notes
Accessibility
termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.
- Keyboard: Arrow keys move inside the composite;
Home/Endselect the first or last enabled item;Enter/Spaceactivate, select, or toggle;Escapecancels or closes an owned surface;Tab/Shift+Tabmove between termcn/Ink focus targets. - Focus and composition: Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
- Screen reader: Ink labels and semantic state expose the component without relying on visual styling alone.