Kbd

Display keyboard shortcuts and key combinations

Import

import { Kbd } from "heroui-solid";

Usage

⌘K⇧P⌃C⌥D

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24import { Kbd } from "heroui-solid"

export function Basic() {
  return (
    <div class="flex items-center gap-4">
      <Kbd>
        <Kbd.Abbr keyValue="command" />
        <Kbd.Content>K</Kbd.Content>
      </Kbd>
      <Kbd>
        <Kbd.Abbr keyValue="shift" />
        <Kbd.Content>P</Kbd.Content>
      </Kbd>
      <Kbd>
        <Kbd.Abbr keyValue="ctrl" />
        <Kbd.Content>C</Kbd.Content>
      </Kbd>
      <Kbd>
        <Kbd.Abbr keyValue="option" />
        <Kbd.Content>D</Kbd.Content>
      </Kbd>
    </div>
  )
}

Anatomy

Import the Kbd component and access all parts using dot notation.

import { Kbd } from "heroui-solid";

export default () => (
  <Kbd>
    <Kbd.Abbr keyValue="command" />
    <Kbd.Content>K</Kbd.Content>
  </Kbd>
);

Arrow Keys:

↑↓←→

Page Navigation:

⇞⇟↖↘

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42import { Kbd } from "heroui-solid"

export function NavigationKeys() {
  return (
    <div class="flex flex-col gap-4">
      <div class="flex items-center gap-2">
        <span class="text-sm text-muted">Arrow Keys:</span>
        <div class="flex items-center gap-2">
          <Kbd>
            <Kbd.Abbr keyValue="up" />
          </Kbd>
          <Kbd>
            <Kbd.Abbr keyValue="down" />
          </Kbd>
          <Kbd>
            <Kbd.Abbr keyValue="left" />
          </Kbd>
          <Kbd>
            <Kbd.Abbr keyValue="right" />
          </Kbd>
        </div>
      </div>
      <div class="flex items-center gap-2">
        <span class="text-sm text-muted">Page Navigation:</span>
        <div class="flex items-center gap-2">
          <Kbd>
            <Kbd.Abbr keyValue="pageup" />
          </Kbd>
          <Kbd>
            <Kbd.Abbr keyValue="pagedown" />
          </Kbd>
          <Kbd>
            <Kbd.Abbr keyValue="home" />
          </Kbd>
          <Kbd>
            <Kbd.Abbr keyValue="end" />
          </Kbd>
        </div>
      </div>
    </div>
  )
}

Inline Usage

Press Esc to close the dialog.

Use ⌘K to open the command palette.

Navigate with ↑ and ↓ arrow keys.

Save your work with ⌘S regularly.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42import { Kbd } from "heroui-solid"

export function InlineUsage() {
  return (
    <div class="space-y-4">
      <p class="text-sm">
        Press{" "}
        <Kbd>
          <Kbd.Content>Esc</Kbd.Content>
        </Kbd>{" "}
        to close the dialog.
      </p>
      <p class="text-sm">
        Use{" "}
        <Kbd>
          <Kbd.Abbr keyValue="command" />
          <Kbd.Content>K</Kbd.Content>
        </Kbd>{" "}
        to open the command palette.
      </p>
      <p class="text-sm">
        Navigate with{" "}
        <Kbd>
          <Kbd.Abbr keyValue="up" />
        </Kbd>{" "}
        and{" "}
        <Kbd>
          <Kbd.Abbr keyValue="down" />
        </Kbd>{" "}
        arrow keys.
      </p>
      <p class="text-sm">
        Save your work with{" "}
        <Kbd>
          <Kbd.Abbr keyValue="command" />
          <Kbd.Content>S</Kbd.Content>
        </Kbd>{" "}
        regularly.
      </p>
    </div>
  )
}

Instructional Text

Quick Actions

• Open search: ⌘K
• Toggle sidebar: ⌘B
• New file: ⌘N
• Quick save: ⌘S

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41import { Kbd } from "heroui-solid"

export function InstructionalText() {
  return (
    <div class="space-y-3">
      <div class="rounded-lg bg-surface p-4">
        <h4 class="mb-2 text-sm font-semibold">Quick Actions</h4>
        <ul class="space-y-2 text-sm">
          <li>
            • Open search:{" "}
            <Kbd>
              <Kbd.Abbr keyValue="command" />
              <Kbd.Content>K</Kbd.Content>
            </Kbd>
          </li>
          <li>
            • Toggle sidebar:{" "}
            <Kbd>
              <Kbd.Abbr keyValue="command" />
              <Kbd.Content>B</Kbd.Content>
            </Kbd>
          </li>
          <li>
            • New file:{" "}
            <Kbd>
              <Kbd.Abbr keyValue="command" />
              <Kbd.Content>N</Kbd.Content>
            </Kbd>
          </li>
          <li>
            • Quick save:{" "}
            <Kbd>
              <Kbd.Abbr keyValue="command" />
              <Kbd.Content>S</Kbd.Content>
            </Kbd>
          </li>
        </ul>
      </div>
    </div>
  )
}

Special Keys

Press ↵ to confirm or ⎋ to cancel.

Use ⇥ to navigate between form fields and ⇧⇥ to go back.

Hold ␣ to temporarily enable panning mode.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38import { Kbd } from "heroui-solid"

export function SpecialKeys() {
  return (
    <div class="space-y-3">
      <p class="text-sm">
        Press{" "}
        <Kbd>
          <Kbd.Abbr keyValue="enter" />
        </Kbd>{" "}
        to confirm or{" "}
        <Kbd>
          <Kbd.Abbr keyValue="escape" />
        </Kbd>{" "}
        to cancel.
      </p>
      <p class="text-sm">
        Use{" "}
        <Kbd>
          <Kbd.Abbr keyValue="tab" />
        </Kbd>{" "}
        to navigate between form fields and{" "}
        <Kbd>
          <Kbd.Abbr keyValue="shift" />
          <Kbd.Abbr keyValue="tab" />
        </Kbd>{" "}
        to go back.
      </p>
      <p class="text-sm">
        Hold{" "}
        <Kbd>
          <Kbd.Abbr keyValue="space" />
        </Kbd>{" "}
        to temporarily enable panning mode.
      </p>
    </div>
  )
}

Variants

Copy:⌘C⌘C

Paste:⌘V⌘V

Cut:⌘X⌘X

Undo:⌘Z⌘Z

Redo:⌘⇧Z⌘⇧Z

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65import { Kbd } from "heroui-solid"

export function Variants() {
  return (
    <div class="flex flex-col gap-4">
      <div class="flex items-center gap-2">
        <span>Copy:</span>
        <Kbd>
          <Kbd.Abbr keyValue="command" />
          <Kbd.Content>C</Kbd.Content>
        </Kbd>
        <Kbd variant="light">
          <Kbd.Abbr keyValue="command" />
          <Kbd.Content>C</Kbd.Content>
        </Kbd>
      </div>
      <div class="flex items-center gap-2">
        <span>Paste:</span>
        <Kbd>
          <Kbd.Abbr keyValue="command" />
          <Kbd.Content>V</Kbd.Content>
        </Kbd>
        <Kbd variant="light">
          <Kbd.Abbr keyValue="command" />
          <Kbd.Content>V</Kbd.Content>
        </Kbd>
      </div>
      <div class="flex items-center gap-2">
        <span>Cut:</span>
        <Kbd>
          <Kbd.Abbr keyValue="command" />
          <Kbd.Content>X</Kbd.Content>
        </Kbd>
        <Kbd variant="light">
          <Kbd.Abbr keyValue="command" />
          <Kbd.Content>X</Kbd.Content>
        </Kbd>
      </div>
      <div class="flex items-center gap-2">
        <span>Undo:</span>
        <Kbd>
          <Kbd.Abbr keyValue="command" />
          <Kbd.Content>Z</Kbd.Content>
        </Kbd>
        <Kbd variant="light">
          <Kbd.Abbr keyValue="command" />
          <Kbd.Content>Z</Kbd.Content>
        </Kbd>
      </div>
      <div class="flex items-center gap-2">
        <span>Redo:</span>
        <Kbd>
          <Kbd.Abbr keyValue="command" />
          <Kbd.Abbr keyValue="shift" />
          <Kbd.Content>Z</Kbd.Content>
        </Kbd>
        <Kbd variant="light">
          <Kbd.Abbr keyValue="command" />
          <Kbd.Abbr keyValue="shift" />
          <Kbd.Content>Z</Kbd.Content>
        </Kbd>
      </div>
    </div>
  )
}

Styling

Passing Tailwind CSS classes

import { Kbd } from "heroui-solid";

function CustomKbd() {
  return (
    <Kbd class="bg-gray-100 dark:bg-gray-800">
      <Kbd.Content>K</Kbd.Content>
    </Kbd>
  );
}

Customizing the component classes

To customize the Kbd component classes, you can use the @layer components directive.
Learn more.

@layer components {
  .kbd {
    @apply bg-gray-100 dark:bg-gray-800 border-gray-300;
  }

  .kbd__abbr {
    @apply font-bold;
  }

  .kbd__content {
    @apply text-sm;
  }
}

HeroUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The Kbd component uses these CSS classes (View source styles):

Base Classes

.kbd - Base keyboard key styles with background, border, and spacing
.kbd__abbr - Abbreviation element for modifier keys
.kbd__content - Content wrapper for key text

API Reference

Kbd Props

Prop	Type	Default	Description
`children`	`JSX.Element`	-	Content of the key
`variant`	`"default" \| "light"`	`"default"`	Variant of the keyboard key
`class`	`string`	-	Custom CSS classes

Kbd.Abbr Props

Prop	Type	Default	Description
`keyValue`	`KbdKey`	-	The keyboard key to display (symbol and accessible title)
`class`	`string`	-	Custom CSS classes

Kbd.Key Props

Prop	Type	Default	Description
`children`	`JSX.Element`	-	Text content of the key
`class`	`string`	-	Custom CSS classes

Kbd.Content Type

Available key values for the keyValue prop:

Modifier Keys	Special Keys	Navigation Keys	Function Keys
`command`	`enter`	`up`	`fn`
`shift`	`delete`	`down`
`ctrl`	`escape`	`left`
`option`	`tab`	`right`
`alt`	`space`	`pageup`
`win`	`capslock`	`pagedown`
	`help`	`home`
		`end`

Last updated: 7/19/26, 3:27 AM