Kbd
Freev1.0.0Key caps that match the platform, and shortcuts that press in and run.
Build for your project
Code/install build
Usage
Import it and pass your content. The props that matter most are listed next.
Example
import { Kbd, KbdGroup, Shortcut } from "@/components/ui/notchset/kbd";
export function SearchHint({ focus }: { focus: () => void }) {
return (
<>
<KbdGroup><Kbd k="mod" /><Kbd k="k" /></KbdGroup>
<Shortcut keys="mod+k" onTrigger={focus} />
</>
);
}Props
k (Kbd)–stringA key name (mod, shift, enter, k) shown for the platform.
keys (Shortcut)–stringA combo (mod+k) or a sequence (g r).
onTrigger (Shortcut)–() => voidRuns on the keys; without it the shortcut is only a hint.
scope (Shortcut, useShortcut)–RefObject<HTMLElement>Fire only while focus is inside this element.
platform (KbdProvider)–'auto' | 'mac' | 'windows'Pin the symbols; auto reads the device.
Anatomy
- Same parts as shadcn's Kbd, plus Shortcut, useShortcut and KbdProvider.
- Put a Shortcut inside a Button to show and bind its key at once.
- The ? sheet in the demo is a Dialog listing Shortcuts, with a filter.
Kbddata-slot="kbd"One key cap.
KbdGroupdata-slot="kbd-group"Caps side by side.
Shortcutdata-slot="shortcut"A combo or sequence that shows and runs.
KbdProvider / useShortcutdata-slot="kbd"Pin the platform; bind keys without a hint.
Source
components/ui/notchset/kbd.tsx
Loading the code
Build for your project
Code/install build
Installation
Base UI
pnpm dlx shadcn@latest add https://notchset.dev/r/kbd.jsonRadix
pnpm dlx shadcn@latest add https://notchset.dev/r/radix-nova/kbd.jsonFree, no account or key. Use the command for your project's primitives: a radix-*, new-york or default style in components.json is Radix, a base-* style is Base UI. With the @notchset registry added, @notchset/<name> picks for you.
Install by hand
- 1. No extra packages: React and Tailwind CSS v4 are enough.
- 2. Copy the files to these paths (the source, or save them all as a .zip)
- components/ui/notchset/kbd.tsx
- lib/beautiful-ui/notchset/instrument.tsx
- lib/beautiful-ui/notchset/root.ts
- 3. No stylesheet needed.
- 4. Install what it builds on first: shadcn's cn helper (lib/utils.ts, from npx shadcn init), the theme foundation (its tokens and base styles)
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
For coding agents
Give your coding assistant the Markdown guide instead of screenshots.
Use it for
- Showing the shortcut for an action in a button or menu
- A page with keyboard shortcuts and a ? sheet
Use something else when
- Code or commands: use Code Block
Mistakes to avoid
- Scope page shortcuts to their area so they don't fight the browser's
- Show the same shortcut you bind (write it once in keys)
Agents find it by
- kbd, keyboard shortcut, hotkey, key cap, shortcut hint, command key, Notchset
Where agents read it
- Guide for this component: https://notchset.dev/md/kbd.md
- Every component, for tools without MCP: /llms.txt
- MCP server:
https://notchset.dev/api/mcp(setup)
Behaviour
Keyboard
- Your keys
- Run the action; the caps press in
Accessibility
- A Shortcut is read as its keys (⌘ + K, G then R)
- Letter shortcuts never fire inside text fields
Motion
- Press
- The caps move down 1px and fill (140ms)
Responsive
- Caps don't wrap; hide hints on touch screens if they add nothing.
Performance
- One keydown listener per Shortcut, removed on unmount.
Changelog
v1.0.0 · 2026-10-04
First release
