"use client"; import React from "react"; import { cn } from "@/lib/utils"; interface KbdProps { children: React.ReactNode; size?: "sm" | "md" | "lg"; className?: string; } export const Kbd: React.FC = ({ children, size = "md", className, }) => { const sizeClasses = { sm: "text-[10px] px-1 py-0.5 min-w-[18px]", md: "text-xs px-1.5 py-0.5 min-w-[22px]", lg: "text-sm px-2 py-1 min-w-[28px]", }; return ( {children} ); }; // Keyboard Shortcut display interface ShortcutProps { keys: string[]; separator?: string; size?: "sm" | "md" | "lg"; className?: string; } export const Shortcut: React.FC = ({ keys, separator = "+", size = "md", className, }) => { const formatKey = (key: string) => { const keyMap: Record = { cmd: "⌘", command: "⌘", ctrl: "⌃", control: "⌃", alt: "⌥", option: "⌥", shift: "⇧", enter: "↵", return: "↵", backspace: "⌫", delete: "⌦", escape: "⎋", esc: "⎋", tab: "⇥", up: "↑", down: "↓", left: "←", right: "→", space: "␣", }; return keyMap[key.toLowerCase()] || key.toUpperCase(); }; return ( {keys.map((key, index) => ( {formatKey(key)} {index < keys.length - 1 && ( {separator} )} ))} ); };

Name	Type	Default	Description
`children`	`ReactNode`	`-`	Key label.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size.

Kbd

Preview

Installation

Usage

Keyboard Shortcuts

Props