Kbd

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Add this component (its dependencies come along)
npx koalaui-cli@latest add kbd

Usage#

import { Kbd } from "@/components/ui/kbd"

export function Example() {
  return <Kbd>Esc</Kbd>
}

Variants#

default is a flat gray chip (no border, no shadow) whose translucent fill stays visible on any surface, a highlighted menu row included. soft is an alias of that same chip, outline is a hairline cap over a transparent fill for a key that should read lighter, solid inverts for high-contrast callouts, and ghost drops the cap entirely: just the muted glyph, for ⌘K hints inside a button or input where a raised key would read as a second control.

Sizes#

Combinations#

Kbd is a single key by design. Build a shortcut by placing several side by side in an inline-flex row, and each key keeps its own cap.

Inline#

Drop a key straight into running text. At size="sm" the gray chip sits inside the line height without pushing the lines apart.

FAQ#