Kbd

A component for displaying keyboard shortcuts and key combinations.

⌘+K

Installation

npx shadcn@latest add https://scrollxui.dev/registry/kbd.json

Usage

import { Kbd, KbdKey, KbdSeparator } from "@/components/ui/kbd";

<Kbd>
    <KbdKey aria-label="Meta">⌘</KbdKey>
    <KbdSeparator className="font-mono text-foreground">+</KbdSeparator>
    <KbdKey>K</KbdKey>
  </Kbd>

API Reference

Kbd

A component for displaying keyboard shortcuts and key combinations.

Props

Property	Type	Default	Description
`children`	ReactNode	`required`	The content inside the Kbd component, usually the key label or elements.
`className`	string	`undefined`	Optional additional CSS classes to customize styling.
`...props`	ComponentProps<'span'>	`undefined`	All other native span element props are supported.