Kbd

Key caps for keyboard shortcuts: ⌘, ⇧, ⌥, ⌃ and letters.

@cupertinoui/kbdRegistry JSON

⌘⇧4

Press ⌘ Space to open Spotlight.

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

export default function KbdDemo() {
  return (
    <div className="flex flex-col items-center gap-3 text-mac-body text-mac-label-secondary">
      <KbdGroup>
        <Kbd>⌘</Kbd>
        <Kbd>⇧</Kbd>
        <Kbd>4</Kbd>
      </KbdGroup>
      <p>
        Press <Kbd>⌘</Kbd> <Kbd>Space</Kbd> to open Spotlight.
      </p>
    </div>
  )
}

Installation

pnpm dlx shadcn@latest add @cupertinoui/kbd

The first install also adds the macOS theme. See Installation to set up the registry.

Usage

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

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

API Reference

Every part forwards the props of the underlying element. The props below are the ones CupertinoUI adds or changes.

Kbd / KbdGroup

Prop	Type	Description
`className`	`string`	Extra classes, merged with the component's own.