The Kbd component displays keyboard shortcuts with proper semantic HTML and includes built-in tooltips for common keyboard symbols.
Installation
npx shadcn@latest add @eo-n/kbd
Install dependencies
npm install @radix-ui/react-slot class-variance-authority
Copy component code
Copy and paste the following code into your project at components/ui/kbd.tsx:import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";
export const kbdVariants = cva(
"inline-flex items-center justify-center text-center text-xs font-medium tracking-tight shadow-sm gap-1.5 text-muted-foreground",
{
variants: {
variant: {
default: "bg-accent",
outline: "bg-background outline outline-border",
ghost: "bg-transparent shadow-none",
},
size: {
default: "h-6 rounded px-1.5",
sm: "h-5 rounded-sm px-1",
lg: "h-7 rounded-md px-2",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
}
);
const KEY_DESCRIPTIONS: Record<string, string> = {
"⌘": "Command",
"⇧": "Shift",
"⌥": "Option",
"⌃": "Control",
Ctrl: "Control",
"⌫": "Backspace",
"⎋": "Escape",
"↩": "Return",
"⇥": "Tab",
"⌤": "Enter",
"↑": "Arrow Up",
"↓": "Arrow Down",
"←": "Arrow Left",
"→": "Arrow Right",
"⇪": "Caps Lock",
fn: "Function",
"⌦": "Delete",
"⇞": "Page Up",
"⇟": "Page Down",
"↖": "Home",
"↘": "End",
"↕": "Page Up/Down",
"↔": "Left/Right",
} as const;
export type KbdVariants = VariantProps<typeof kbdVariants>;
interface KbdProps extends React.ComponentProps<"div">, KbdVariants {
asChild?: boolean;
}
function Kbd({ className, variant, size, asChild, ...props }: KbdProps) {
const Comp = asChild ? Slot : "div";
return (
<Comp
data-slot="kbd"
className={cn(kbdVariants({ className, size, variant }))}
{...props}
/>
);
}
interface KbdKeyProps extends React.ComponentProps<"span"> {
asChild?: boolean;
}
function KbdKey({
className,
asChild,
title: titleProp,
children,
...props
}: KbdKeyProps) {
const Comp = asChild ? Slot : "span";
const keyText = children?.toString() ?? "";
const title = titleProp ?? KEY_DESCRIPTIONS[keyText] ?? keyText;
return (
<abbr title={title} className="no-underline">
<Comp data-slot="kbd-key" className={cn(className)} {...props}>
{children}
</Comp>
</abbr>
);
}
interface KbdSeparatorProps extends React.ComponentProps<"span"> {
asChild?: boolean;
}
function KbdSeparator({
className,
children = "+",
asChild,
...props
}: KbdSeparatorProps) {
const Comp = asChild ? Slot : "span";
return (
<Comp
data-slot="kbd-separator"
className={cn("text-muted-foreground", className)}
{...props}
>
{children}
</Comp>
);
}
export { Kbd, KbdKey, KbdSeparator };
Update imports
Update the import paths to match your project setup.
Usage
import { Kbd, KbdKey, KbdSeparator } from "@/components/ui/kbd";
<Kbd>
<KbdKey>⇧</KbdKey>
<KbdSeparator />
<KbdKey>Enter</KbdKey>
</Kbd>
Examples
Basic Shortcut
<Kbd>
<KbdKey>⌘</KbdKey>
<KbdSeparator />
<KbdKey>K</KbdKey>
</Kbd>
With Predefined Tooltips
The component automatically shows descriptive tooltips for common keyboard symbols:
<Kbd>
<KbdKey>↩</KbdKey> {/* Shows "Return" on hover */}
</Kbd>
<Kbd>
<KbdKey>⌃</KbdKey> {/* Shows "Control" on hover */}
<KbdSeparator />
<KbdKey>C</KbdKey>
</Kbd>
Custom Tooltips
<Kbd>
<KbdKey title="Control">⌃</KbdKey>
<KbdSeparator />
<KbdKey title="Shift">⇧</KbdKey>
<KbdSeparator />
<KbdKey title="Command Palette">P</KbdKey>
</Kbd>
Outline Variant
<Kbd variant="outline">
<KbdKey>Ctrl</KbdKey>
<KbdSeparator />
<KbdKey>V</KbdKey>
</Kbd>
Ghost Variant
<Kbd variant="ghost">
<KbdKey>Esc</KbdKey>
</Kbd>
Different Sizes
<Kbd size="sm">
<KbdKey>⌘</KbdKey>
<KbdSeparator />
<KbdKey>S</KbdKey>
</Kbd>
<Kbd size="default">
<KbdKey>⌘</KbdKey>
<KbdSeparator />
<KbdKey>S</KbdKey>
</Kbd>
<Kbd size="lg">
<KbdKey>⌘</KbdKey>
<KbdSeparator />
<KbdKey>S</KbdKey>
</Kbd>
Component API
Kbd
The root container for the keyboard shortcut.
variant
'default' | 'outline' | 'ghost'
The visual style variant.
default - Accent backgroundoutline - Border with backgroundghost - Transparent with no shadow
The size of the keyboard shortcut display.
When true, merges props into the immediate child element.
KbdKey
Represents an individual keyboard key.
Custom tooltip text. If not provided, uses predefined descriptions for common symbols.
When true, merges props into the immediate child element.
The key content (symbol or text).
KbdSeparator
A visual separator between keys.
The separator character. Defaults to ”+”.
When true, merges props into the immediate child element.
Predefined Key Descriptions
The following symbols have built-in tooltip descriptions:
⌘ - Command⇧ - Shift⌥ - Option⌃ - Control⌫ - Backspace⎋ - Escape↩ - Return⇥ - Tab⌤ - Enter↑ ↓ ← → - Arrow keys⇪ - Caps Lock⌦ - Delete⇞ ⇟ - Page Up/Down↖ ↘ - Home/End
