Kbd

A keyboard key rendered literally in the seam language: a tiny embossed keycap resting on the surface.

K

Press Enter for a new line

tsx
import { Kbd, KbdGroup } from "@/registry/seam/ui/kbd"

export default function KbdDemo() {
  return (
    <div className="flex flex-col items-center gap-3 text-sm">
      <KbdGroup>
        <Kbd>⌘</Kbd>
        <Kbd>K</Kbd>
      </KbdGroup>
      <p className="text-muted-foreground">
        Press <Kbd>⇧</Kbd> <Kbd>Enter</Kbd> for a new line
      </p>
    </div>
  )
}
bunx --bun @seamui/cli@latest add kbd

Notes

  • Static by design — a Kbd depicts a key, it isn't one; no press feedback, not focusable or clickable.
  • Renders a native <kbd> element, announced as keyboard input; prefer full key names (“Shift”) or an aria-label when a symbol alone (⇧) could be ambiguous.

Press feedback, reduced motion, and haptics follow the global policy — see Motion and Haptics.