Kbd

Keyboard shortcut display with OS-aware symbols and elegant dark styling.

⌘K

⌃⇧P

⌘⌥T

Installation

Run the CLI

$npx particleui-cli add kbd

Usage

TSX

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

export default function Example() {
  return (
    <div className="flex items-center gap-1 text-sm">
      Press <Kbd>⌘</Kbd><Kbd>K</Kbd> to open command palette
    </div>
  )
}

Props

Prop	Type	Default	Required
keys	string[]	—	yes

Details

Source filecomponents/ui/kbd.tsx

Typeui

Categoriestypography

npm dependenciesclsx, tailwind-merge

Registry deps—

Claude skill—