# Kbd · JGuang UI

> Used to display textual user input from keyboard.

- Page: https://jiguang132.com/systems/jguang-ui/docs/components/base/kbd
- Based on: shadcn/ui documentation (MIT) @ bc0705384b51252af26dcc65425b216bf5eb063c

> Example `kbd-demo`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/kbd


## Installation


  

**Command**


  

**Manual**


```text
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](/r/jguang-ui/base/kbd.json)


### Update the import paths to match your project setup.


## Usage

```tsx
import { Kbd } from "@/components/ui/kbd"
```

```tsx
<Kbd>Ctrl</Kbd>
```

## Composition

Use the following composition to build `Kbd` and `KbdGroup`:

```text
Kbd
KbdGroup
├── Kbd
└── Kbd
```

## Group

Use the `KbdGroup` component to group keyboard keys together.


> Example `kbd-group`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/kbd


## Button

Use the `Kbd` component inside a `Button` component to display a keyboard key inside a button.


> Example `kbd-button`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/kbd


## Tooltip

You can use the `Kbd` component inside a `Tooltip` component to display a tooltip with a keyboard key.


> Example `kbd-tooltip`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/kbd


## Input Group

You can use the `Kbd` component inside a `InputGroupAddon` component to display a keyboard key inside an input group.


> Example `kbd-input-group`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/kbd


## RTL

To enable RTL support in JGuang UI, see the [RTL configuration guide](/systems/jguang-ui/docs/rtl).


> Example `kbd-rtl`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/kbd


## API Reference

### Kbd

Use the `Kbd` component to display a keyboard key.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` | ``      |

```tsx
<Kbd>Ctrl</Kbd>
```

### KbdGroup

Use the `KbdGroup` component to group `Kbd` components together.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` | ``      |

```tsx
<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>B</Kbd>
</KbdGroup>
```

---

Index of all JGuang resources: https://jiguang132.com/llms.txt