---
outline: deep
---

# Kbd

Kbd elements are used to display keyboard keys or shortcuts inline with text. Commonly used in documentation, tooltips, and help panels to indicate key bindings.

**`.l-kbd`** — Native HTML Element

## Options

### Single keys

Add `.l-kbd` to a native `<kbd>` element.

```html
<div class="flex gap-2 flex-wrap items-center">
  <kbd class="l-kbd">Ctrl</kbd>
  <kbd class="l-kbd">Shift</kbd>
  <kbd class="l-kbd">Enter</kbd>
  <kbd class="l-kbd">Esc</kbd>
  <kbd class="l-kbd">Tab</kbd>
</div>
```

### Key combinations

Wrap individual `<kbd>` elements in an outer `<kbd>` with `+` separators.

```html
<div class="flex gap-4 flex-wrap items-center">
  <kbd class="flex gap-1 items-center"
    ><kbd class="l-kbd">Ctrl</kbd>+<kbd class="l-kbd">C</kbd></kbd
  >
  <kbd class="flex gap-1 items-center"
    ><kbd class="l-kbd">Ctrl</kbd>+<kbd class="l-kbd">V</kbd></kbd
  >
  <kbd class="flex gap-1 items-center"
    ><kbd class="l-kbd">Ctrl</kbd>+<kbd class="l-kbd">Shift</kbd>+<kbd class="l-kbd">P</kbd></kbd
  >
</div>
```

## API reference

### Importing

```css
@import 'luxen-ui/css/kbd';
```

### CSS classes

- `.l-kbd` — Base class for keyboard key styling on `<kbd>` elements.