Kbd

The Kbd component is used to display keyboard shortcuts and key combinations, either standalone or grouped together with KbdGroup.

Kbd Examples

Installation

# The component is already installed at:
# src/components/ui/shadcn/kbd.tsx

Usage

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

export function KbdDemo() {
  return (
    <div className="flex items-center gap-4">
      <Kbd>Esc</Kbd>
      <KbdGroup>
        <Kbd>⌘</Kbd>
        <Kbd>Shift</Kbd>
        <Kbd>P</Kbd>
      </KbdGroup>
    </div>
  )
}

Components