kbd
Used to display textual user input from keyboard.
Rewritten version:
Note: You might wonder why we don’t use the CommandShortcut component from the command module.
The reason is that we want to give you the flexibility to use the kbd component in any context, not just within a command.
Additionally, the CommandShortcut component is specifically designed to represent a keyboard shortcut associated with a command, not a plain HTML element.
As a result, it has a different API and does not require certain props like keys or onKeyPress.
Philosophy
Keyboard shortcuts deserve visual prominence. The Kbd component renders key combinations with consistent styling, making shortcut discovery a natural part of the UI rather than something hidden in documentation. We pair it with @gentleduck/vim for actual key binding — Kbd handles the display, vim handles the logic.
Installation
npx @gentleduck/cli add kbd
npx @gentleduck/cli add kbd
Usage
import { Kbd } from "@/components/ui/kbd"import { Kbd } from "@/components/ui/kbd"<Kbd>Ctrl</Kbd><Kbd>Ctrl</Kbd>Examples
Group
Use the KbdGroup component to group keyboard keys together.
Button
Use the Kbd component inside a Button component to display a keyboard key inside a button.
Tooltip
You can use the Kbd component inside a Tooltip component to display a tooltip with a keyboard key.
Input Group
You can use the Kbd component inside a InputGroupAddon component to display a keyboard key inside an input group.
API Reference
Kbd
Displays an individual keyboard key with consistent styling.
| Prop | Type | Default | Description |
|---|---|---|---|
dir | 'ltr' | 'rtl' | -- | Text direction override. Resolved via useDirection (dir prop -> DirectionProvider -> 'ltr'). |
className | string | -- | Additional class names for the kbd element |
children | React.ReactNode | -- | Key label text or icon |
...props | React.HTMLProps<HTMLElement> | -- | Additional props to spread to the kbd element |
KbdGroup
Groups multiple Kbd components together in an inline layout.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | -- | Additional class names for the group |
children | React.ReactNode | -- | Kbd elements to group together |
...props | React.ComponentPropsWithoutRef<'div'> | -- | Additional props to spread to the group element (renders as a kbd) |
RTL Support
Direction is resolved through the shared primitives direction module. Use a local dir="rtl" override when the component exposes it, or set DirectionProvider at app/root level for global RTL/LTR behavior.