Shadcn Kbd
Free shadcn/ui kbd component for React to display keyboard shortcuts and key hints in menus, tooltips, and command triggers. Copy or install in one command.
Installation
{
"registries": {
"@designrevision": "https://registry.designrevision.com/r/{name}.json"
}
}Add to your existing components.json. Requires shadcn/ui v2.3+.
Packages
Props
No props documented yet.
import * as React from "react"
import { cn } from "@/lib/utils"
function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
return (
<kbd
className={cn(
"pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground",
className
)}
{...props}
/>
)
}
export { Kbd }
Examples
Keys and shortcuts
Single keys and a key combination — render one Kbd per key and group them for a shortcut.
Packages
Props
No props documented yet.
import { Kbd } from "@/components/ui/kbd"
export default function KbdKeys01() {
return (
<div className="flex flex-wrap items-center gap-3">
<Kbd>⌘</Kbd>
<Kbd>⇧</Kbd>
<Kbd>⌥</Kbd>
<Kbd>↵</Kbd>
<Kbd>Esc</Kbd>
<span className="flex items-center gap-1">
<Kbd>⌘</Kbd>
<Kbd>K</Kbd>
</span>
</div>
)
}
The Shadcn Kbd renders a keyboard key or shortcut hint — a small, theme-aware <kbd> element for surfacing the shortcut behind an action. Drop it into menus, tooltips, and command triggers.
When to use
Use Kbd anywhere you want to teach a shortcut: next to a menu item, inside a button like a search or command trigger, or in a tooltip. It is a presentational hint — it does not bind the shortcut itself.
Showing combinations
The component renders a single key. For a combination, render one Kbd per key and group them side by side — for example ⌘ followed by K. A flex container with a small gap keeps the spacing tidy.
Theming
Kbd is styled with your --muted and --border tokens, so it follows your theme — including dark mode — with zero overrides.
