Kbd

Displays a keyboard key or keyboard shortcut.

⌘

children

#Installation

bunx --bun barefoot add kbd

#Usage

⌘KCtrlCEnterShiftEsc

1import { Kbd, KbdGroup } from "@/components/ui/kbd"23function KbdDemo() {4  return (5    <div className="flex flex-wrap items-center gap-4">6      <KbdGroup>7        <Kbd>⌘</Kbd>8        <Kbd>K</Kbd>9      </KbdGroup>1011      <Kbd>Enter</Kbd>12      <Kbd>Shift</Kbd>13      <Kbd>Esc</Kbd>14    </div>15  )16}

#Examples

#KbdGroup

CtrlShiftP

<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>Shift</Kbd>
  <Kbd>P</Kbd>
</KbdGroup>

#Shortcuts

Search⌘K

Copy⌘C

Paste⌘V

Undo⌘Z

1import { Kbd, KbdGroup } from "@/components/ui/kbd"23function ShortcutsList() {4  return (5    <div className="w-full max-w-sm space-y-3">6      <div className="flex items-center justify-between">7        <span className="text-sm text-muted-foreground">Search</span>8        <KbdGroup>9          <Kbd>⌘</Kbd>10          <Kbd>K</Kbd>11        </KbdGroup>12      </div>13      <div className="flex items-center justify-between">14        <span className="text-sm text-muted-foreground">Copy</span>15        <KbdGroup>16          <Kbd>⌘</Kbd>17          <Kbd>C</Kbd>18        </KbdGroup>19      </div>20    </div>21  )22}

#API Reference

Kbd

Prop	Type	Default	Description
asChild	boolean	false	Render child element with kbd styling instead of <kbd>.
children	Child	-	The key label content.

KbdGroup

Prop	Type	Default	Description
asChild	boolean	false	Render child element with group styling instead of <kbd>.
children	Child	-	The grouped key elements.