Kbd

⌘ K

Installation

npx bearnie add kbd

import Kbd from "@/components/ui/kbd/Kbd.astro";
import KbdGroup from "@/components/ui/kbd/KbdGroup.astro";

Usage

import { Kbd, KbdGroup } from "@/components/ui"

<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