Themes
- Default
- Catppuccin
- Dracula
- High Contrast
- High Contrast Light
- Monokai
- Nord
- One Dark
- Solarized
- Tokyo Night
- AMOLED
- Aura
- Ayu
- Carbonfox
- Catppuccin Frappe
- Catppuccin Macchiato
- Cobalt2
- Cursor
- Everforest
- Flexoki
- GitHub
- Gruvbox
- Kanagawa
- Lucent Orng
- Material
- Matrix
- Mercury
- Night Owl
- OC-2
- One Dark Pro
- OpenCode
- Orng
- Osaka Jade
- Palenight
- Rose Pine
- Shades of Purple
- Synthwave '84
- Vercel
- Vesper
- Zenburn
Utility
AI
Terminal
help-screen-demo
No opentui live preview is registered for this example yet.
Installation
$ pnpm dlx shadcn@latest add @termcn/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 | - |