Kbd

A compact label for a keyboard key.

Overview

Kbd renders a native kbd element. It displays a key. It does not listen for that key or become a button. Pair it with real keyboard handlers elsewhere when the shortcut must work.

Preview

⌘

Customize

Label

Installation

Add the component with the CLI. It copies the files in and installs anything they depend on.

npx vinyaas add kbd

Usage

1
2
3
4
5
6
7
8
9
import { Kbd } from "@/components/ui/kbd";

export function CommandShortcut() {
  return (
    <span>
      Press <Kbd>⌘</Kbd> <Kbd>K</Kbd>
    </span>
  );
}

Examples

Named keys

Use readable labels for Enter, Return, Space, and Escape. Kbd is visual only. It does not listen for those keys.

EnterReturnSpaceEsc

Arrow keys

Show the four directions with arrow glyphs.

↑↓←→

Command palette

Document the macOS and Windows shortcuts for search.

⌘KCtrlK

Save shortcut

A realistic modifier combination next to its action.

Save with ⌘S

In practice

A help panel lists editor actions beside their Kbd chords so people can learn the shortcuts at a glance.

Keyboard shortcuts

Chord labels for common editor actions. Keys stay presentational.

Open command palette⌘K
Save the current file⌘S
Close the active panelEsc
Move between results↑↓
Confirm the selectionEnter

API

Other attributes for the underlying element are passed through.

Name	Type	Default	Description
`label`	string	`"⌘"`	The key label shown in the preview (one key at a time).
`children`	ReactNode	—	The key label, such as a letter or symbol.
`className`	string	—	Merged onto the kbd element with cn.
`KbdGroup`	component	—	Wraps the keys of one shortcut with a small gap. Put one Kbd per key so symbol keys such as ⌘ size like letters.

Accessibility

The element is presentational. Visible text is the accessible name. Do not rely on Kbd alone to expose a keyboard shortcut to assistive technology when the control needs one.