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 create-gridland add 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.
import { StatusBar } from "@/components/ui/status-bar"
import { textStyle } from "@/lib/text-style"
import { useTheme } from "@/lib/theme"
const theme = useTheme()
<StatusBar
items={[{ key: "←→", label: "change type" }]}
extra={<span style={textStyle({ fg: theme.accent, bold: true })}>dots</span>}
/>Dynamic Items
Build items based on component state.
const items: StatusBarItem[] = [
{ key: "↑↓", label: "navigate" },
{ key: "Enter", label: "select" },
]
if (isEditing) {
items.push({ key: "Esc", label: "cancel" })
}
<StatusBar items={items} />With Theme Colors
Style the extra content using theme tokens.
import { StatusBar } from "@/components/ui/status-bar"
import { textStyle } from "@/lib/text-style"
import { useTheme } from "@/lib/theme"
function MyStatusBar({ model }: { model: string }) {
const theme = useTheme()
return (
<StatusBar
items={[{ key: "Tab", label: "switch focus" }]}
extra={
<span style={textStyle({ fg: theme.secondary, dim: true })}>
{model}
</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 |