Kbd

A visual keyboard key cap component for displaying keyboard shortcuts. Purely presentational; it does not bind any keyboard listeners or register shortcuts.

Interactive example#

Kbd · Live example

⌘KOpen command search

Change platforms to see how shortcut labels adapt.

The code uses shared demo presentation helpers. Their complete source and styling are included in the LLM build context.

Usage#

TSX

import { Kbd } from '@clidey/ux';

function ShortcutHint() {
  return (
    <div className="flex items-center gap-1">
      <Kbd>⌘</Kbd><Kbd>K</Kbd>
      <span className="text-sm text-muted-foreground ml-2">Open search</span>
    </div>
  );
}

Props#

Kbd extends all native <kbd> element attributes.

Prop	Type	Default	Description
`children`	`ReactNode`	—	The key label to display (e.g., "⌘", "Shift", "K")
`className`	`string`	—	Additional CSS classes

Examples#

Single key

TSX

<Kbd>Esc</Kbd>

Key combination

TSX

<div className="flex items-center gap-1">
  <Kbd>⌘</Kbd><Kbd>⇧</Kbd><Kbd>P</Kbd>
</div>

Note

This component is purely visual. To actually register keyboard shortcuts, use addEventListener('keydown', ...) or a shortcut library separately.

Was this page helpful?