⌘+K
import { Kbd, KbdKey, KbdSeparator } from "@/components/ui/kbd";
export function Kbddemo() {
return (
<Kbd>
<KbdKey>⌘</KbdKey>
<KbdSeparator />
<KbdKey title="Search">K</KbdKey>
</Kbd>
);
}
Installation
npx shadcn@latest add @eo-n/kbd
Usage
Import all parts and piece them together.
import { Kbd, KbdKey, KbdSeparator } from "@/components/ui/kbd";
<Kbd>
<KbdKey>⇧<KbdKey>
<KbdSeparator />
<KbdKey>Enter<KbdKey>
</KbdKey>
Predefined Key Titles
The component provides predefined titles for common keyboard symbols.
<Kbd>
<KbdKey>↩</KbdKey> {/* Shows "Return" on hover */}
<KbdKey>⌃</KbdKey> {/* Shows "Control" on hover */}
</Kbd>
Personalized Key Titles
You can define custom titles for any key
<Kbd>
<KbdKey title="Ctrl">⌃</KbdKey>
<KbdSeparator />
<KbdKey title="Shift">⇧</KbdKey>
<KbdSeparator />
<KbdKey title="Command Palette">P</KbdKey>
</KbdKey>
Examples
Default
⌘+K
import { Kbd, KbdKey, KbdSeparator } from "@/components/ui/kbd";
export function Kbddemo() {
return (
<Kbd>
<KbdKey>⌘</KbdKey>
<KbdSeparator />
<KbdKey title="Search">K</KbdKey>
</Kbd>
);
}
Outline
⌥+⇥
import { Kbd, KbdKey, KbdSeparator } from "@/components/ui/kbd";
export function KbdOutline() {
return (
<Kbd variant="outline">
<KbdKey>⌥</KbdKey>
<KbdSeparator />
<KbdKey>⇥</KbdKey>
</Kbd>
);
}
Ghost
⇧+⌥+F
import { Kbd, KbdKey, KbdSeparator } from "@/components/ui/kbd";
export function KbdGhost() {
return (
<Kbd variant="ghost">
<KbdKey>⇧</KbdKey>
<KbdSeparator />
<KbdKey>⌥</KbdKey>
<KbdSeparator />
<KbdKey title="Format">F</KbdKey>
</Kbd>
);
}
API Reference
Root
The primary container for displaying keyboard shortcuts.
Prop | Type | Default |
---|---|---|
variant? | "default" | "outline" | "ghost" | null | "default" |
size? | "default" | "sm" | "lg" | null | "default" |
asChild? | boolean | false |
Data Attribute | Value |
---|---|
[data-slot] | "kbd" |
Key
Represents an individual keyboard key.
Prop | Type | Default |
---|---|---|
title? | string | - |
asChild? | boolean | false |
Data Attribute | Value |
---|---|
[data-slot] | "kbd-key" |
Separtor
A visual separator between multiple keys.
Prop | Type | Default |
---|---|---|
asChild? | boolean | false |
Data Attribute | Value |
---|---|
[data-slot] | "kbd-separtor" |