Yami UI

Display keyboard input. Use KbdModifier for modifier keys (⌘, ⇧, ⌃, ⌥) and KbdGroup for sequences.

⌘K

⌃⇧P

⎋

Installation

Add the kbd component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/kbd.json

Usage

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

<KbdGroup>
  <Kbd>{kbdKey("cmd")}</Kbd>
  <Kbd>K</Kbd>
</KbdGroup>

<KbdGroup>
  <Kbd>{kbdKey("ctrl")}</Kbd>
  <Kbd>{kbdKey("shift")}</Kbd>
  <Kbd>P</Kbd>
</KbdGroup>

Examples

Shortcut sequences

Use kbdKey() to convert modifier names to symbols

Command palette

⌘K

Save

⌘S

Find & Replace

⌃⇧H

Escape

⎋

Tab

⇥

Code

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

<KbdGroup>
  <Kbd>{kbdKey("cmd")}</Kbd>
  <Kbd>K</Kbd>
</KbdGroup>

<KbdGroup>
  <Kbd>{kbdKey("ctrl")}</Kbd>
  <Kbd>{kbdKey("shift")}</Kbd>
  <Kbd>H</Kbd>
</KbdGroup>

kbdKey reference

All recognized modifier key names

⌘cmd

⌃ctrl

⌥alt

⇧shift

↵enter

⌫backspace

⌦delete

⎋esc

⇥tab

↑up

↓down

←left

→right

␣space

⇪capslock

Code

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

kbdKey("cmd")       // ⌘
kbdKey("ctrl")      // ⌃
kbdKey("alt")       // ⌥
kbdKey("shift")     // ⇧
kbdKey("enter")     // ↵
kbdKey("esc")       // ⎋
kbdKey("tab")       // ⇥