Kbd

⌘ ⇧ ⌥ ⌃

Ctrl B

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

<div class="flex flex-wrap items-center gap-2">
  <Kbd>⌘</Kbd>
  <Kbd>⇧</Kbd>
  <Kbd>⌥</Kbd>
  <Kbd>⌃</Kbd>
  <KbdGroup>
    <Kbd>Ctrl</Kbd>
    <Kbd>B</Kbd>
  </KbdGroup>
</div>

Installation

npx shadcn@latest add @fulldev/kbd

Usage

import { Kbd } from "@/components/ui/kbd"

<Kbd>Ctrl</Kbd>

Composition

Use the following composition to build Kbd and KbdGroup:

Kbd
KbdGroup
├── Kbd
└── Kbd

Examples

Group

Use the KbdGroup component to group keyboard keys together.

Use

Ctrl B

Ctrl K

to open the command palette

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

<div class="flex flex-wrap items-center gap-1 text-sm">
  <span>Use</span>
  <KbdGroup>
    <Kbd>Ctrl</Kbd>
    <Kbd>B</Kbd>
  </KbdGroup>
  <span>or</span>
  <KbdGroup>
    <Kbd>Ctrl</Kbd>
    <Kbd>K</Kbd>
  </KbdGroup>
  <span>to open the command palette</span>
</div>

Button

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

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

---
import { buttonVariants } from "@/components/ui/button"
import { Kbd, KbdGroup } from "@/components/ui/kbd"
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip"
---

<div class="flex flex-wrap items-center gap-3">
  <Tooltip>
    <TooltipTrigger class={buttonVariants({ variant: "outline" })}>
      Save
    </TooltipTrigger>
    <TooltipContent>
      Save
      <KbdGroup>
        <Kbd>⌘</Kbd>
        <Kbd>S</Kbd>
      </KbdGroup>
    </TooltipContent>
  </Tooltip>

  <Tooltip>
    <TooltipTrigger class={buttonVariants({ variant: "outline" })}>
      Print
    </TooltipTrigger>
    <TooltipContent>
      Print
      <KbdGroup>
        <Kbd>⌘</Kbd>
        <Kbd>P</Kbd>
      </KbdGroup>
    </TooltipContent>
  </Tooltip>
</div>

Input Group

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

⌘ K

---
import { Icon } from "@/components/ui/icon"
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group"
import { Kbd } from "@/components/ui/kbd"
---

<div class="flex w-full max-w-xs flex-col gap-6">
  <InputGroup>
    <InputGroupInput placeholder="Search..." />
    <InputGroupAddon>
      <Icon name="search" />
    </InputGroupAddon>
    <InputGroupAddon align="inline-end">
      <Kbd>⌘</Kbd>
      <Kbd>K</Kbd>
    </InputGroupAddon>
  </InputGroup>
</div>

API Reference

Kbd

Use the Kbd component to display a keyboard key.

Prop	Type	Default
`class`	`string`

<Kbd>Ctrl</Kbd>

KbdGroup

Use the KbdGroup component to group Kbd components together.

Prop	Type	Default
`class`	`string`

<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>B</Kbd>
</KbdGroup>

See the GitHub source code for more information on props.

Sidebar

Search