Kbd
Keyboard shortcut key rendered as a styled keycap. Three visual profiles: flat, raised, and sculpted.
class-variance-authority
Loading...
Installation
$ shadcn add @jalco/kbdUsage
import { Kbd } from "@/components/kbd"<Kbd />Variants
Flat
Esc⌘CCtrlShiftP
Raised
Esc⌘CCtrlShiftP
Sculpted
Esc⌘CCtrlShiftP
Sizes
Small
⌘KOpen command palette
Medium
⌘KOpen command palette
Large
⌘KOpen command palette
Examples
With separator
Ctrl+Alt+Del
Arrow keys
←↑↓→
Inline with text
Press ⌘K to open the command palette
Color Schemes
Built-in color palettes inspired by popular keycap sets. Pass a name string or a custom { bg, text, border } object.
⌘K
8008⌘K
dolch⌘K
olivia⌘K
botanical⌘K
oblivion⌘K
laser⌘K
mizu⌘K
dracula⌘K
hammerhead⌘K
wob⌘K
bow⌘K
creamAPI Reference
Kbd
PropType
KbdCombo
PropType