Components
StatusBar
A horizontal bar displaying keybinding hints
A horizontal bar that displays keybinding hints with key labels and descriptions. Commonly placed at the bottom of a view.
StatusBar
Run demo
bunx @gridland/demo status-barcurl -fsSL https://raw.githubusercontent.com/thoughtfulllc/gridland/main/scripts/run-demo.sh | bash -s status-barInstallation
bunx shadcn@latest add @gridland/status-barUsage
import { StatusBar } from "@/components/ui/status-bar"<StatusBar
items={[
{ key: "Tab", label: "switch focus" },
{ key: "q", label: "quit" },
]}
/>Examples
Multiple Items
<StatusBar
items={[
{ key: "↑↓", label: "navigate" },
{ key: "Enter", label: "select" },
{ key: "Esc", label: "cancel" },
{ key: "q", label: "quit" },
]}
/>With Extra Content
Render custom inline content to the left of the hints. A dim │ separator
appears between the extra content and the keybinding items.
<StatusBar
items={[{ key: "←→", label: "change type" }]}
extra={<span style={textStyle({ fg: theme.accent, bold: true })}>dots</span>}
/>API Reference
StatusBar
| Prop | Type | Default | Description |
|---|---|---|---|
items | StatusBarItem[] | - | Array of keybinding hints to display |
extra | ReactNode | - | Inline content rendered left of the hints (must be <span> or string) |
StatusBarItem
| Field | Type | Description |
|---|---|---|
key | string | Key or key combination text (e.g. "Tab", "←→") |
label | string | Description of what the key does |