---
title: "KBD"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS KBD using semantic HTML for keyboard shortcuts and hotkeys. Multiple sizes for shortcut guides, developer documentation, and UI hints."
url: https://frutjam.com/tr/components/kbd
---

# KBD Component

Klavye tuşu bileşenleri klavye girişini görsel olarak temsil eder; kısayolları, kısayol tuşlarını ve klavyede gezinmeyi belgelemek için kullanışlıdır. Anlamsal HTML ile oluşturulan kbd öğeleri, kullanıcı eylemlerini ve etkileşim modellerini iletir. Frutjam kbd sistemi birden fazla boyutu ve stili destekler; kısayol belgeleri, öğretici katmanlar ve klavye kılavuzları için idealdir.

Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.

| Sınıf  | Tip   | Tanım                                                      |
| ------ | ----- | ---------------------------------------------------------- |
| kbd    | Temel | Yükseltilmiş kenarlık ve gölge ile tasarlanmış klavye tuşu |
| kbd-xs | Boyut | Ekstra küçük (0,75rem yazı tipi)                           |
| kbd-sm | Boyut | Küçük (0,8125rem yazı tipi)                                |
| kbd-md | Boyut | Orta (0,875rem yazı tipi, varsayılan)                      |
| kbd-lg | Boyut | Büyük (1rem yazı tipi)                                     |
| kbd-xl | Boyut | Ekstra büyük (1,125rem yazı tipi)                          |

## Temel Kullanım

## Tuş Kombinasyonları

```html
<div class="space-y-2">
  <div>
    <span class="text-sm">Copy:</span>
    <kbd class="kbd">Ctrl</kbd>
    <span>+</span>
    <kbd class="kbd">C</kbd>
  </div>
  <div>
    <span class="text-sm">Paste:</span>
    <kbd class="kbd">Ctrl</kbd>
    <span>+</span>
    <kbd class="kbd">V</kbd>
  </div>
  <div>
    <span class="text-sm">Undo:</span>
    <kbd class="kbd">Ctrl</kbd>
    <span>+</span>
    <kbd class="kbd">Z</kbd>
  </div>
</div>
```

## Anahtar Boyutları

```html
<kbd class="kbd kbd-xs">Xs</kbd>
<kbd class="kbd kbd-sm">Sm</kbd>
<kbd class="kbd kbd-md">Md</kbd>
<kbd class="kbd kbd-lg">Lg</kbd>
```

## Özel Anahtarlar

```html
<div class="space-x-2">
  <kbd class="kbd">Enter</kbd>
  <kbd class="kbd">Tab</kbd>
  <kbd class="kbd">Shift</kbd>
  <kbd class="kbd">Alt</kbd>
  <kbd class="kbd">Esc</kbd>
  <kbd class="kbd">Space</kbd>
</div>
```

## Ok Tuşları

```html
<div class="inline-grid grid-cols-3 gap-1">
  <div></div>
  <kbd class="kbd">↑</kbd>
  <div></div>
  <kbd class="kbd">←</kbd>
  <kbd class="kbd">↓</kbd>
  <kbd class="kbd">→</kbd>
</div>
```

## Klavye Kısayolu Kılavuzu

```html
<div class="card bg-base-100 shadow-xl max-w-md">
  <div class="card-content">
    <h2 class="card-title text-lg">Keyboard Shortcuts</h2>
    <div class="space-y-2 text-sm">
      <div class="flex justify-between">
        <span>Search</span>
        <div><kbd class="kbd kbd-sm">Ctrl</kbd> + <kbd class="kbd kbd-sm">K</kbd></div>
      </div>
      <div class="flex justify-between">
        <span>Focus</span>
        <div><kbd class="kbd kbd-sm">/</kbd></div>
      </div>
      <div class="flex justify-between">
        <span>New</span>
        <div><kbd class="kbd kbd-sm">Ctrl</kbd> + <kbd class="kbd kbd-sm">N</kbd></div>
      </div>
    </div>
  </div>
</div>
```