Shadcn Kbd
React kbd for shortcut keycaps in menus and tooltips. Built with TypeScript and Tailwind CSS for Next.js using Base UI — grouped keys that never steal clicks.
A kbd is a keycap: one key or a short combo. Drop it in a button, a tooltip, a menu row, or a search field so people can see the shortcut before they hunt for it. It is a label — pointer-events-none — not a listener.
Looking for a neobrutalism version for shadcn?
Same kbd, thicker borders. The NeoBrutalism kbd is the kit if you want that look.
Usage
import { Kbd, KbdGroup } from "@/components/ui/kbd"<KbdGroup>
<Kbd>Ctrl</Kbd>
<span>+</span>
<Kbd>B</Kbd>
</KbdGroup>Kbd is one key. KbdGroup lines them up — put a + span between keys when it is one combo, not two shortcuts.
Composition
Group
KbdGroup holds whole shortcuts next to each other. Each Kbd can already contain Ctrl + B.
Button
Sit the key on the end of a Button. Clicks pass through — the button stays the control.
Tooltip
Inside Tooltip content the cap inverts so it still reads on the dark surface.
Input Group
An Input Group addon is the usual place for a search hint — ⌘ K on the end.
RTL
Wrap with DirectionProvider and dir="rtl". Keys stay LTR glyphs; the sentence flips around them.
API
Prop
Type
Native kbd attributes pass through. There is no size or variant.
KbdGroup
Prop
Type
Typed as a div, renders a kbd. Same pass-through.
Notes
Showing it does not bind it
The cap is not a listener. Wire the shortcut yourself. pointer-events-none is so it can sit inside a Button without eating the click.
Swap ⌘ for Ctrl from the platform. Showing ⌘ on Windows is a broken promise.
With other components
Shortcut on the label
TooltipKey on inverted hover
Input GroupSearch field hint
CommandRow end hint
Dropdown MenuMenu item shortcut
Button GroupShared toolbar keys
Questions
Related
Was this page helpful?
Sign in to leave feedback.
Item
React item for settings, notification, and file list rows. Built with TypeScript and Tailwind CSS for Next.js using Base UI — media, title, description, and actions.
Label
React label for inputs, checkboxes, and form controls. Built with TypeScript and Tailwind CSS for Next.js using Base UI — click the text to focus the control.