Kbd

Keycaps for showing keyboard keys and shortcuts.

⌘ShiftP

Press CtrlK to open the command menu.

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

export default function KbdDemo() {
  return (
    <div className="grid justify-items-center gap-4 text-sm text-muted-foreground">
      <KbdGroup>
        <Kbd>⌘</Kbd>
        <Kbd>Shift</Kbd>
        <Kbd>P</Kbd>
      </KbdGroup>
      <p>
        Press{' '}
        <KbdGroup>
          <Kbd>Ctrl</Kbd>
          <span aria-hidden="true">+</span>
          <Kbd>K</Kbd>
        </KbdGroup>{' '}
        to open the command menu.
      </p>
    </div>
  )
}

Installation

pnpm dlx shadcn@latest add https://kagadmodyaa.vercel.app/r/kbd.json

Needs a React + Tailwind project set up with shadcn. Copies the component source straight into your project, so you can edit it.

Kbd imports cn() from lib/utils.ts — add it too if you don't have it yet:

import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Usage

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

<Kbd>Esc</Kbd>

<KbdGroup>
  <Kbd>⌘</Kbd>
  <Kbd>K</Kbd>
</KbdGroup>

Examples

In buttons and lists

Copy⌘C
Paste⌘V
Undo⌘Z

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

const shortcuts = [
  { action: 'Copy', keys: ['⌘', 'C'] },
  { action: 'Paste', keys: ['⌘', 'V'] },
  { action: 'Undo', keys: ['⌘', 'Z'] },
]

export default function KbdShortcuts() {
  return (
    <div className="grid w-full max-w-xs gap-6">
      <Button variant="outline" className="justify-between">
        Search
        <KbdGroup>
          <Kbd>⌘</Kbd>
          <Kbd>K</Kbd>
        </KbdGroup>
      </Button>
      <ul className="grid gap-2 text-sm">
        {shortcuts.map(shortcut => (
          <li key={shortcut.action} className="flex items-center justify-between">
            <span>{shortcut.action}</span>
            <KbdGroup>
              {shortcut.keys.map(key => (
                <Kbd key={key}>{key}</Kbd>
              ))}
            </KbdGroup>
          </li>
        ))}
      </ul>
    </div>
  )
}

API Reference

Name	Type	Default	Description
Kbd	<kbd>	—	A single key cap. Renders a native kbd element, so it is announced as keyboard input.
KbdGroup	<span>	—	Lays several keys out in a row.