Kbd

A component to display keyboard shortcuts.

⌘⇧⌥⌃Ctrl+B

<KbdGroup>
  <Kbd>⌘</Kbd>
  <Kbd>⇧</Kbd>
  <Kbd>⌥</Kbd>
  <Kbd>⌃</Kbd>
</KbdGroup>
<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <span>+</span>
  <Kbd>B</Kbd>
</KbdGroup>

Installation

pnpm dlx cubix@latest add kbd --base aria

Usage

Import

import { Kbd, KbdGroup } from "@/components/cubix/kbd"

Example

<Kbd>Ctrl</Kbd>
<Kbd>⌘K</Kbd>

Basic

Ctrl⌘KCtrl + B

<div className="flex items-center gap-2">
  <Kbd>Ctrl</Kbd>
  <Kbd>⌘K</Kbd>
  <Kbd>Ctrl + B</Kbd>
</div>

Modifier Keys

⌘C

<div className="flex items-center gap-2">
  <Kbd>⌘</Kbd>
  <Kbd>C</Kbd>
</div>

KbdGroup

Use KbdGroup to group related keys together.

CtrlShiftP

Use Ctrl + BCtrl + K to open the command palette

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

Arrow Keys

↑↓←→

<div className="flex items-center gap-2">
  <Kbd>↑</Kbd>
  <Kbd>↓</Kbd>
  <Kbd>←</Kbd>
  <Kbd>→</Kbd>
</div>

With Icons

<KbdGroup>
  <Kbd>
    <CircleDashedIcon />
  </Kbd>
  <Kbd>
    <ArrowLeftIcon />
  </Kbd>
  <Kbd>
    <ArrowRightIcon />
  </Kbd>
</KbdGroup>

With Icons and Text

LeftVoice Enabled

<KbdGroup>
  <Kbd>
    <ArrowLeftIcon />
    Left
  </Kbd>
  <Kbd>
    <CircleDashedIcon />
    Voice Enabled
  </Kbd>
</KbdGroup>

Input Group

Compose Kbd inside an InputGroup addon.

⌘K

<InputGroup className="max-w-xs">
  <InputGroupInput placeholder="Search..." />
  <InputGroupAddon align="inline-end">
    <Kbd>⌘K</Kbd>
  </InputGroupAddon>
</InputGroup>

Tooltip

Show keyboard shortcuts inside a tooltip.

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger render={<Button size="icon-sm" variant="outline" />}>
      <SaveIcon />
    </TooltipTrigger>
    <TooltipContent className="pr-1.5">
      <div className="flex items-center gap-2">
        Save Changes <Kbd>S</Kbd>
      </div>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

With samp

Wrap sample output in <samp> when the key represents a program or file name.

File

<Kbd>
  <samp>File</samp>
</Kbd>

API Reference

Kbd

Prop	Type	Default	Description
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).
children	React.ReactNode	-	The key label, icon, or combination to display.

KbdGroup

Prop	Type	Default	Description
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).
children	React.ReactNode	-	One or more Kbd elements to group together.