Kbd

A visual indicator for keyboard keys and shortcuts, styled to match system keyboard key appearance.

⌘ ⇧ ⌥ ⌃

Ctrl + B

⌘ K

1
---
2
import { Kbd, KbdGroup } from '@bejamas/ui/components/kbd';
3
---
4

5
<div class="flex flex-col items-center gap-4">
6
  <KbdGroup>
7
    <Kbd>⌘</Kbd>
8
    <Kbd>⇧</Kbd>
9
    <Kbd>⌥</Kbd>
10
    <Kbd>⌃</Kbd>
11
  </KbdGroup>
12
  <KbdGroup>
13
    <Kbd>Ctrl</Kbd>
14
    <span>+</span>
15
    <Kbd>B</Kbd>
16
  </KbdGroup>
17
  <KbdGroup>
18
    <Kbd>⌘</Kbd>
19
    <Kbd>K</Kbd>
20
  </KbdGroup>
21
</div>

Installation

bunx bejamas add kbd

npx bejamas add kbd

pnpm dlx bejamas add kbd

yarn dlx bejamas add kbd

Usage

1
---
2
import { Kbd, KbdGroup } from '@bejamas/ui/components/kbd';
3
---
4

5
<KbdGroup>
6
  <Kbd>⌘</Kbd>
7
  <Kbd>K</Kbd>
8
</KbdGroup>
9

10
<KbdGroup>
11
  <Kbd>Ctrl</Kbd>
12
  <span>+</span>
13
  <Kbd>B</Kbd>
14
</KbdGroup>

Examples

Group

Use the KbdGroup component to group keyboard keys together.

Use

Ctrl + B Ctrl + K

to open the command palette

1
---
2
import { Kbd, KbdGroup } from '@bejamas/ui/components/kbd';
3
---
4

5
<div class="flex flex-col items-center gap-4">
6
  <p class="text-muted-foreground text-sm">
7
   Use{" "}
8
    <KbdGroup>
9
      <Kbd>Ctrl + B</Kbd>
10
      <Kbd>Ctrl + K</Kbd>
11
    </KbdGroup>{" "}
12
    to open the command palette
13
  </p>
14
</div>

Button

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

1
---
2
import { Button } from '@bejamas/ui/components/button';
3
import { Kbd } from '@bejamas/ui/components/kbd';
4
---
5

6
<Button variant="outline">
7
  Accept <Kbd class="translate-x-0.5">
8
    ⏎
9
  </Kbd>
10
</Button>

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

Save Changes S

Print Document

Ctrl P

1
---
2
import { Button } from '@bejamas/ui/components/button';
3
import { ButtonGroup } from '@bejamas/ui/components/button-group';
4
import { Kbd, KbdGroup } from '@bejamas/ui/components/kbd';
5
import { Tooltip, TooltipContent, TooltipTrigger } from '@bejamas/ui/components/tooltip';
6
---
7

8
<div class="flex flex-wrap gap-4">
9
  <ButtonGroup>
10
    <Tooltip>
11
      <TooltipTrigger asChild>
12
        <Button variant="outline">Save</Button>
13
      </TooltipTrigger>
14
      <TooltipContent class="pr-1.5">
15
        <div class="flex items-center gap-2">
16
          Save Changes <Kbd>S</Kbd>
17
        </div>
18
      </TooltipContent>
19
    </Tooltip>
20
    <Tooltip>
21
      <TooltipTrigger asChild>
22
        <Button variant="outline">Print</Button>
23
      </TooltipTrigger>
24
      <TooltipContent class="pr-1.5">
25
        <div class="flex items-center gap-2">
26
          Print Document <KbdGroup>
27
            <Kbd>Ctrl</Kbd>
28
            <Kbd>P</Kbd>
29
          </KbdGroup>
30
        </div>
31
      </TooltipContent>
32
    </Tooltip>
33
  </ButtonGroup>
34
</div>

Input Group

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

⌘ K

1
---
2
import { SearchIcon } from '@lucide/astro';
3

4
import { InputGroup, InputGroupAddon, InputGroupInput } from '@bejamas/ui/components/input-group';
5
import { Kbd } from '@bejamas/ui/components/kbd';
6
---
7

8
<div class="flex w-full max-w-xs flex-col gap-6">
9
  <InputGroup>
10
    <InputGroupInput placeholder="Search..." />
11
    <InputGroupAddon>
12
      <SearchIcon />
13
    </InputGroupAddon>
14
    <InputGroupAddon align="inline-end">
15
      <Kbd>⌘</Kbd>
16
      <Kbd>K</Kbd>
17
    </InputGroupAddon>
18
  </InputGroup>
19
</div>