Kbd

A component for displaying keyboard keys and shortcuts.

Single keys:

K⌘⌃⇧

Key combinations:

⌘K⌘ShiftPCtrlAltDelete

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

export default function KbdDemo() {
  return (
    <div className="flex flex-col gap-4">
      <div>
        <p className="mb-2 text-sm text-muted-foreground">Single keys:</p>
        <div className="flex gap-2">
          <Kbd>K</Kbd>
          <Kbd>⌘</Kbd>
          <Kbd>⌃</Kbd>
          <Kbd>⇧</Kbd>
        </div>
      </div>
      <div>
        <p className="mb-2 text-sm text-muted-foreground">Key combinations:</p>
        <div className="flex gap-2">
          <KbdGroup>
            <Kbd>⌘</Kbd>
            <Kbd>K</Kbd>
          </KbdGroup>
          <KbdGroup>
            <Kbd>⌘</Kbd>
            <Kbd>Shift</Kbd>
            <Kbd>P</Kbd>
          </KbdGroup>
          <KbdGroup>
            <Kbd>Ctrl</Kbd>
            <Kbd>Alt</Kbd>
            <Kbd>Delete</Kbd>
          </KbdGroup>
        </div>
      </div>
    </div>
  )
}

Installation


pnpm dlx shadcn@latest add @coss/kbd

Usage

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

Single key:

<Kbd>K</Kbd>

Multiple keys (key combination):

<KbdGroup>
  <Kbd>⌘</Kbd>
  <Kbd>K</Kbd>
</KbdGroup>

Examples

Input Group

⌘K

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

export default function InputGroupWithKbd() {
  return (
    <InputGroup>
      <InputGroupInput type="search" placeholder="Search…" />
      <InputGroupAddon align="inline-end">
        <Kbd>⌘K</Kbd>
      </InputGroupAddon>
    </InputGroup>
  )
}

API Reference

Kbd

Displays a single keyboard key.

Prop	Type	Default
`className`	`string`

<Kbd>⌘K</Kbd>

KbdGroup

Groups multiple keyboard keys for key combinations.

Prop	Type	Default
`className`	`string`

<KbdGroup>
  <Kbd>⌘</Kbd>
  <Kbd>K</Kbd>
</KbdGroup>

Input Group Label

On This Page

Installation Usage Examples Input Group API Reference Kbd KbdGroup