Keyboard Shortcuts

Renders keyboard shortcut keys with proper symbols like ⌘, ⌃, and ⇄. Displays keys as individual elements inside a kbd tag. Use when showing user interface shortcuts in a readable format.

bytom from Spell

Installation

terminal

pnpm dlx layro-cli add @xxtomm/keyboard-shortcuts

npx layro-cli add @xxtomm/keyboard-shortcuts

npx layro-cli add @xxtomm/keyboard-shortcuts

bunx layro-cli add @xxtomm/keyboard-shortcuts

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { cn } from "@/lib/utils";
import { useEffect, useState } from "react";
import { useHotkeys } from "react-hotkeys-hook";

type KeyItem = string | { display: string; key: string };

interface KbdProps {
  keys: KeyItem[];
  className?: string;
  active?: boolean;
  listenToKeyboard?: boolean;
}