Kbd

⌘ K

Installation

npx bearnie add kbd

Usage

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

<Kbd>Ctrl</Kbd>

Examples

Group

Use the KbdGroup component to group keyboard keys together.

Ctrl Shift K

<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>Shift</Kbd>
  <Kbd>K</Kbd>
</KbdGroup>

Button

Use the Kbd component inside a Button component to display a keyboard key inside a button.

<Button variant="outline">
  Accept
  <KbdGroup>
    <Kbd>⌘</Kbd>
    <Kbd>↵</Kbd>
  </KbdGroup>
</Button>

You can use the Kbd component inside a Tooltip component to display a tooltip with a keyboard key.

<div class="flex gap-2">
  <Tooltip>
    <TooltipTrigger>
      <Button variant="outline">Save</Button>
    </TooltipTrigger>
    <TooltipContent>
      Save changes
      <KbdGroup>
        <Kbd>⌘</Kbd>
        <Kbd>S</Kbd>
      </KbdGroup>
    </TooltipContent>
  </Tooltip>
  <Tooltip>
    <TooltipTrigger>
      <Button variant="outline">Print</Button>
    </TooltipTrigger>
    <TooltipContent>
      Print document
      <KbdGroup>
        <Kbd>⌘</Kbd>
        <Kbd>P</Kbd>
      </KbdGroup>
    </TooltipContent>
  </Tooltip>
</div>

Input group

You can use the Kbd component inside a InputGroupAddon component to display a keyboard key inside an input group.

⌘ K

<InputGroup>
  <InputGroupInput placeholder="Search..." />
  <InputGroupAddon align="inline-end">
    <KbdGroup>
      <Kbd>⌘</Kbd>
      <Kbd>K</Kbd>
    </KbdGroup>
  </InputGroupAddon>
</InputGroup>

Anatomy

Kbd - Displays a single keyboard key with proper styling
KbdGroup - Groups multiple Kbd components together

Props

Prop	Type	Default	Description
class	string	-	Additional CSS classes

KbdGroup

Prop	Type	Default	Description
class	string	-	Additional CSS classes