Kbd
Used to display textual user input from keyboard.
Installation
Command
Manual
Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.
Copy and paste the following code into your project.
View complete source: components/ui/kbd.tsx
Update the import paths to match your project setup.
Usage
import { Kbd } from "@/components/ui/kbd"
<Kbd>Ctrl</Kbd>
Composition
Use the following composition to build Kbd and KbdGroup:
Kbd
KbdGroup
├── Kbd
└── Kbd
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.
RTL
To enable RTL support in JGuang UI, see the RTL configuration guide.
API Reference
Kbd
Use the Kbd component to display a keyboard key.
| Prop | Type | Default |
|---|---|---|
className | string | `` |
<Kbd>Ctrl</Kbd>
KbdGroup
Use the KbdGroup component to group Kbd components together.
| Prop | Type | Default |
|---|---|---|
className | string | `` |
<KbdGroup>
<Kbd>Ctrl</Kbd>
<Kbd>B</Kbd>
</KbdGroup>
Source: components/base/kbd.mdx
Technical documentation for JGuang UI.