Utility
Terminal
Installation
$ pnpm dlx shadcn@latest add @termcn/ink/command-palette
Usage
import { CommandPalette } from "@/components/ui/command-palette";<CommandPalette
isOpen={true}
onClose={() => setOpen(false)}
commands={[
{ id: "save", label: "Save", onSelect: () => {} },
{ id: "quit", label: "Quit", onSelect: () => {} },
]}
/>API Reference
CommandPalette
| Prop | Type | Default |
|---|---|---|
commands | Command[] | required |
isOpen | boolean | required |
onClose | () => void | required |
placeholder | string | "Type a command..." |
maxItems | number | 8 |
Command
| Prop | Type | Default |
|---|---|---|
id | string | required |
label | string | required |
description | string | - |
shortcut | string | - |
onSelect | () => void | required |
group | 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.
- 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: Screen-reader mode removes decorative output while preserving meaningful labels and state.