Terminal
Installation
$ pnpm dlx shadcn@latest add @termcn/ink/help-screen
Usage
import { HelpScreen } from "@/components/ui/help-screen";<HelpScreen
title="mycli"
tagline="A blazing-fast task runner"
usage="mycli <command> [options]"
>
<HelpScreen.Section label="Commands">
<HelpScreen.Row flag="init" description="Create a new project" />
<HelpScreen.Row flag="build" description="Compile the source files" />
<HelpScreen.Row flag="test" description="Run the test suite" />
</HelpScreen.Section>
<HelpScreen.Section label="Options">
<HelpScreen.Row flag="--help, -h" description="Show this help message" />
<HelpScreen.Row flag="--version, -v" description="Print version number" />
<HelpScreen.Row flag="--verbose" description="Enable verbose logging" />
</HelpScreen.Section>
</HelpScreen>API Reference
HelpScreen
| Prop | Type | Default |
|---|---|---|
title | string | required |
font | "block" | "simple" | "shade" | "slim" | "block" |
titleColor | string | - |
tagline | string | - |
usage | string | - |
description | string | - |
columnGap | number | 4 |
flagWidth | number | - |
children | ReactNode | required |
HelpScreen.Section
| Prop | Type | Default |
|---|---|---|
label | string | required |
labelColor | string | - |
children | ReactNode | required |
HelpScreen.Row
| Prop | Type | Default |
|---|---|---|
flag | string | required |
description | string | required |
flagColor | string | - |
descriptionColor | string | - |
Notes
Accessibility
termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.
- Screen reader: Ink labels and semantic state expose the component without relying on visual styling alone.