Status Bar
A keybinding hints bar for displaying keyboard shortcuts in the terminal. Supports an optional extra element and customizable separator.
Terminal
Installation
npx shadcn@latest add https://raw.githubusercontent.com/cjroth/ink-web/main/packages/ink-ui/registry/status-bar.jsonnpx shadcn@latest add https://raw.githubusercontent.com/cjroth/ink-web/main/packages/ink-ui/registry/status-bar.jsonpnpm dlx shadcn@latest add https://raw.githubusercontent.com/cjroth/ink-web/main/packages/ink-ui/registry/status-bar.jsonbunx shadcn@latest add https://raw.githubusercontent.com/cjroth/ink-web/main/packages/ink-ui/registry/status-bar.jsonUsage
"use client";
import dynamic from "next/dynamic";
const Terminal = dynamic(() => import("./terminal"), {
ssr: false,
});
export default function Home() {
return <Terminal />;
}"use client";
import { Box, Text } from "ink";
import { InkXterm } from "ink-web";
import { StatusBar } from '@/components/ui/status-bar'
import "ink-web/css";
import "@xterm/xterm/css/xterm.css";
const shortcuts = [
{ key: "⏎/q", label: "exit" },
{ key: "Tab", label: "switch focus" },
{ key: "←→", label: "cycle" },
{ key: "b", label: "back" },
{ key: "z", label: "reset" },
];
export default function Terminal() {
return (
<InkXterm focus>
<Box flexDirection="column">
<Text>My App</Text>
<StatusBar items={shortcuts} />
</Box>
</InkXterm>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | StatusBarItem[] | — | Array of items to display. Each item has key and label |
extra | React.ReactNode | — | Optional content displayed before the items, separated by a vertical bar |
StatusBarItem
| Prop | Type | Description |
|---|---|---|
key | string | The keyboard shortcut or key label (displayed as inverse bold badge) |
label | string | Description of the action (displayed dimmed) |
Examples
Basic Status Bar
<StatusBar items={[
{ key: "⏎/q", label: "exit" },
{ key: "Tab", label: "switch focus" },
{ key: "←→", label: "cycle" },
{ key: "b", label: "back" },
{ key: "z", label: "reset" },
]} />With Extra Content
<StatusBar
items={[
{ key: "⏎/q", label: "exit" },
{ key: "Tab", label: "switch focus" },
{ key: "←→", label: "cycle" },
]}
extra={<Text color="green">● Connected</Text>}
/>