Kbd

Displays keyboard keys and shortcuts. Keys physically press down when you set data-pressed.

Data Display

SearchK

New issueC

Go to inboxGI

Toggle sidebar\

Playground

Tweak the props, the preview and the code follow.

⌘+⇧+K

Press the keys on your keyboard

Props

keys

separator

<KbdGroup>
  <Kbd>⌘</Kbd>
  <span>+</span>
  <Kbd>⇧</Kbd>
  <span>+</span>
  <Kbd>K</Kbd>
</KbdGroup>

npx @plumsydev/plum-ui add kbd

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

<KbdGroup>
  <Kbd>⌘</Kbd>
  <Kbd>K</Kbd>
</KbdGroup>

Set data-pressed to sink the key — wire it to real keyboard events.

⇧⌥⌘K

Press the keys on your keyboard

Rows light up when you press the matching shortcut.

Keyboard shortcuts — try them

A styled kbd element.

Prop	Type	Default
`data-pressed` Renders the key in its pressed state.	`boolean`	`—`