Klavye

import { Kbd, KbdGroup } from "@/components/ui/kbd"

export function KbdDemo() {

Kbd bileşeni bir tuş kapağı işler — primitif bağımlılığı olmayan, stillendirilmiş yerel bir <kbd> öğesidir ve neobrütalist reçeteyle giydirilmiştir: kalın kenarlıklar, keskin gölge ve eş aralıklı (mono) yazı tipi. Her iki arka uç varyantı da aynı dosyayla gelir.

Şu durumlarda tercih edin:

• Komut paletleri ve arama — ⌘ K ipucunu tetikleyicinin yanında veya giriş alanının içinde gösterin.
• Menü öğeleri ve ipuçları — kullanıcıların yerinde öğrenmesi için kısayolu eylem etiketinin yanına koyun.
• Dokümanlar ve değişiklik günlükleri — tam tuş basımlarına ekran görüntüsü olmadan satır içinde atıfta bulunun.

Kurulum#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/kbd.json
npx shadcn@latest add https://neobrutalism.com/r/base/kbd.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/kbd.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/kbd.json
Kopyala

import { cn } from "@/lib/utils"

function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
  return (
    <kbd
      data-slot="kbd"
      className={cn(
        "pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded border-2 bg-muted px-1.5 font-mono text-xs font-medium text-muted-foreground shadow-sm select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3",
        className
      )}
      {...props}
    />
  )
}

function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <kbd
      data-slot="kbd-group"
      className={cn("inline-flex items-center gap-1", className)}
      {...props}
    />
  )
}

export { Kbd, KbdGroup }

Kullanım#

Kopyalaimport { Kbd } from "@/components/ui/kbd"

Kopyala<Kbd>Ctrl</Kbd>

Kompozisyon#

Kbd ve KbdGroup oluşturmak için aşağıdaki kompozisyonu kullanın:

KopyalaKbd
KbdGroup
├── Kbd
└── Kbd

Örnekler#

Grup#

Klavye tuşlarını bir arada gruplamak için KbdGroup bileşenini kullanın.

import { Kbd, KbdGroup } from "@/components/ui/kbd"

export function KbdGroupExample() {

Düğme#

Bir düğmenin içinde klavye tuşu göstermek için Kbd bileşenini bir Button bileşeninin içinde kullanın.

import { Button } from "@/components/ui/button"
import { Kbd } from "@/components/ui/kbd"

Tooltip#

Klavye tuşu içeren bir tooltip göstermek için Kbd bileşenini bir Tooltip bileşeninin içinde kullanabilirsiniz.

import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"
import { Kbd, KbdGroup } from "@/components/ui/kbd"

Input Group#

Bir input group içinde klavye tuşu göstermek için Kbd bileşenini bir InputGroupAddon bileşeninin içinde kullanabilirsiniz.

import { SearchIcon } from "lucide-react"

import {

RTL#

Neobrutalism'de RTL desteğini etkinleştirmek için RTL yapılandırma kılavuzuna bakın.

"use client"

import * as React from "react"

Erişilebilirlik#

Kbd, klavye girdisi için doğru HTML semantiği olan yerel bir <kbd> öğesi işler ve tamamen görseldir: pointer-events-none, select-none, odaklanabilir hiçbir şey yok. Bir kısayol gerçekten çalışıyorsa, yardımcı teknolojilerin duyurabilmesi için kısayolu onu işleyen kontrol üzerinde aria-keyshortcuts ile de bildirin (örneğin düğmede aria-keyshortcuts="Control+B"). ⌘ gibi sembol glifleri ekran okuyucular tarafından tutarsız biçimde seslendirilir — kısayolun önemli olduğu yerlerde tuş adlarını açıkça yazın.

API Referansı#

Kbd#

Bir klavye tuşu göstermek için Kbd bileşenini kullanın.

Kopyala<Kbd>Ctrl</Kbd>

KbdGroup#

Kbd bileşenlerini bir arada gruplamak için KbdGroup bileşenini kullanın.

Kopyala<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>B</Kbd>
</KbdGroup>