Kbd

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

<div class="flex flex-col items-center gap-4">
  <KbdGroup>
    <Kbd>⌘</Kbd>
    <Kbd>⇧</Kbd>
    <Kbd>⌥</Kbd>
    <Kbd>⌃</Kbd>
  </KbdGroup>
  <KbdGroup>
    <Kbd>Ctrl</Kbd>
    <span>+</span>
    <Kbd>B</Kbd>
  </KbdGroup>
</div>

Installation

npx shadcn@latest add @fulldev/kbd

Usage

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

<Kbd>Ctrl</Kbd>

Composition

Kbd
KbdGroup
├── Kbd
└── Kbd

Group

Use KbdGroup to group keyboard keys together.

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

<div class="flex flex-col items-center gap-4">
  <div class="text-sm text-muted-foreground">
    Use
    <KbdGroup>
      <Kbd>Ctrl + B</Kbd>
      <Kbd>Ctrl + K</Kbd>
    </KbdGroup>
    to open the command palette
  </div>
</div>

Button

Put a Kbd inside a Button, with data-icon="inline-end" for the icon spacing.

---
import { Button } from "@/components/ui/button"
import { Kbd } from "@/components/ui/kbd"
---

<Button variant="outline">
  Accept
  <Kbd data-icon="inline-end" class="translate-x-0.5">
    ⏎
  </Kbd>
</Button>

Put a Kbd inside TooltipContent.

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

<div class="flex flex-wrap gap-4">
  <ButtonGroup>
    <Tooltip>
      <TooltipTrigger
        class={buttonVariants({ variant: "outline", class: "rounded-r-none" })}
      >
        Save
      </TooltipTrigger>
      <TooltipContent>
        Save Changes <Kbd>S</Kbd>
      </TooltipContent>
    </Tooltip>
    <Tooltip>
      <TooltipTrigger
        class={buttonVariants({
          variant: "outline",
          class: "rounded-l-none border-l-0",
        })}
      >
        Print
      </TooltipTrigger>
      <TooltipContent>
        Print Document
        <KbdGroup>
          <Kbd>Ctrl</Kbd>
          <Kbd>P</Kbd>
        </KbdGroup>
      </TooltipContent>
    </Tooltip>
  </ButtonGroup>
</div>

Input Group

Put a Kbd inside an InputGroupAddon.

---
import SearchIcon from "@lucide/astro/icons/search"

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>
      <SearchIcon />
    </InputGroupAddon>
    <InputGroupAddon align="inline-end">
      <Kbd>⌘</Kbd>
      <Kbd>K</Kbd>
    </InputGroupAddon>
  </InputGroup>
</div>

RTL

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

const translations = {
  en: {
    dir: "ltr",
    values: {},
  },
  ar: {
    dir: "rtl",
    values: {},
  },
  he: {
    dir: "rtl",
    values: {},
  },
} as const

const { dir } = translations.ar
---

<div class="flex flex-col items-center gap-4" dir={dir}>
  <KbdGroup>
    <Kbd>⌘</Kbd>
    <Kbd>⇧</Kbd>
    <Kbd>⌥</Kbd>
    <Kbd>⌃</Kbd>
  </KbdGroup>
  <KbdGroup>
    <Kbd>Ctrl</Kbd>
    <span>+</span>
    <Kbd>B</Kbd>
  </KbdGroup>
</div>

API Reference

Source: src/components/ui/kbd

Component	Element	Data Slot
`Kbd`	`kbd`	`kbd`
`KbdGroup`	`div`	`kbd-group`

Both take class and pass all other attributes through. KbdGroup renders a div, so do not nest it in a p.

Sidebar

Search