Kbd

Displays keyboard shortcuts with platform-aware key symbols.

Preview

Installation

npm install @matrix-ui/components

Usage

import { Kbd } from '@matrix-ui/components'

<Kbd keys="mod+k" />

Examples

Single Key

Modifier Combinations

The component automatically displays platform-specific symbols. On macOS, modifier keys show as symbols. On Windows/Linux, they display as text.

Arrow Keys

Size Variants

Variants

Common Shortcuts