Kbd

A keycap for shortcut hints, such as the K in Cmd K.

⌘KEsc↵

<Kbd>⌘</Kbd>
<Kbd>K</Kbd>
<Kbd>Esc</Kbd>
<Kbd>↵</Kbd>

Installation

npx shadcn@latest add https://sproutboat.com/ikada/r/kbd.json

The CLI writes components/ikada/kbd.tsx and merges the ikada theme into your CSS. Or take it from the package: import { Kbd } from "@sproutboat/ikada";

Usage

import { Kbd } from "@/components/ikada/kbd";

<Kbd>⌘</Kbd>
<Kbd>K</Kbd>
<Kbd>Esc</Kbd>
<Kbd>↵</Kbd>

Examples

Keys

A keycap for shortcut hints. Decorative text: the control it sits in carries aria-keyshortcuts.

⌘KEsc↵

<Kbd>⌘</Kbd>
<Kbd>K</Kbd>
<Kbd>Esc</Kbd>
<Kbd>↵</Kbd>

In a hint

⌘Kto search sprouts

<p className="flex items-center gap-1.5 text-sb-sm text-fg-muted">
  <Kbd>⌘</Kbd>
  <Kbd>K</Kbd>
  <span className="ms-1">to search sprouts</span>
</p>

Props

No props interface of its own; see src/components/kbd.tsx.

Source: src/components/kbd.tsx