Components

Kbd

Displays a keyboard key or shortcut hint, rendering the semantic <kbd> element so shortcuts read correctly to assistive technology.

Basic usage

Wrap a single key in Kbd to hint a shortcut inline. The key is a 20px box with 12px text set in the UI font, not a monospace face — it sits on a text line without pushing it apart.

Press Esc to close the dialog.

Key combinations

Use KbdGroup to space a multi-key chord like Ctrl K evenly.

CtrlK

Shortcut list

Symbol glyphs such as ⌘ and ⇧ sit comfortably alongside word keys in a shortcut reference.

Open command menu

⌘K

Save changes

CtrlS

Toggle sidebar

⌘⇧B

Icon keys

An icon child that carries no size-* class is drawn at 12px, matching the key’s text size. Reach for this only when a glyph is unavailable — plain text symbols read better to screen readers.

N

Inside a tooltip

A tooltip inverts the page: dark surface, light text. Kbd detects that it is inside a TooltipContent and re-tints itself to a translucent light chip — you do not need to pass a className for it.

Platform-aware hints

Hard-coding “Ctrl+K” is wrong for half your users. KeyboardHint — a composite built on Kbd and KbdGroup — takes the chord as a string and formats each token for the running platform: mod becomes ⌘ on macOS and Ctrl elsewhere, shift and alt follow the platform the same way (⇧/⌥ against Shift/Alt), while enter, esc, tab, and the arrows render one glyph everywhere.

The platform check can only run on the client, so the first render — on the server and during hydration — always says Ctrl, even on a Mac. That single frame is deliberate: guessing on the server would mismatch the client and cost you a hydration warning. The same check is exported on its own as useIsMac() from @comitor/ui — and only from there, never from @comitor/ui/shell.

Props

Kbd and KbdGroup are presentational wrappers — they expose only their native element props.

Prop	Type	Default	Description
`className`	string	`—`	Additional Tailwind classes merged onto the <kbd> element.
`...rest`	React.ComponentProps<'kbd'>	`—`	All native attributes are forwarded. The element always carries data-slot="kbd".

KbdGroup

Prop	Type	Default	Description
`className`	string	`—`	Additional Tailwind classes merged onto the wrapper.
`...rest`	React.ComponentProps<'div'>	`—`	All native div attributes are forwarded. The wrapper is an inline-flex row with a 4px gap and carries data-slot="kbd-group".

KeyboardHint

Prop	Type	Default	Description
`keys`required	string	`—`	The chord, written with + as the separator — "mod+k", "mod+shift+n", "esc". Use mod for the primary command key.
`compact`	boolean	`false`	Renders the whole chord in one key box ("⌘K") instead of one box per key.
`className`	string	`—`	Additional Tailwind classes merged onto the outer KbdGroup (or the single Kbd when compact).

Accessibility

Kbd renders a native <kbd> element, conveying “keyboard input” semantics to screen readers and other assistive technology.
It is marked pointer-events-none and select-none — purely a visual hint that never steals focus or interferes with the interactive element it labels.
Prefer plain text for symbol keys (⌘, ⇧) so they are announced, and reserve embedded icons for cases where a glyph is unavailable.
KeyboardHint is aria-hidden in full, because a string of ⌘⇧↵ read aloud is noise. Put the shortcut into the control’s own aria-label instead — aria-label="Open the command palette, Ctrl K".
When a hint duplicates a real shortcut, ensure the underlying control actually responds to that key binding so the visual and behavioral contract stay in sync.
The key box is sized in rem, so it grows with the data-font-size display axis instead of trapping 12px text in a 20px box.