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.
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.
Use Ctrl + BCtrl + K to open the command palette
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
Use the Kbd component to display a keyboard key.
<Kbd>Ctrl</Kbd><Kbd>Ctrl</Kbd>KbdGroup
Use the KbdGroup component to group Kbd components together.
<KbdGroup>
<Kbd>Ctrl</Kbd>
<Kbd>B</Kbd>
</KbdGroup><KbdGroup>
<Kbd>Ctrl</Kbd>
<Kbd>B</Kbd>
</KbdGroup>