کلید

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

export function KbdDemo() {

کامپوننت kbd یک درپوش کلید رندر می‌کند — عنصر بومی استایل‌شدهٔ <kbd> بدون وابستگی primitive، با دستور پخت نئوبروتالیستی: حاشیه‌های ضخیم، سایهٔ سخت و تایپ mono. هر دو variant بک‌اند همان فایل را می‌فرستند.

برای این موارد از آن استفاده کنید:

• Command palette و جستجو — راهنمای ⌘ K را کنار تریگر یا داخل input نشان دهید.
• آیتم منو و tooltip — میانبر را کنار برچسب اقدام بگذارید تا کاربر همان‌جا یاد بگیرد.
• Docs و changelog — فشردن دقیق کلید را بدون اسکرین‌شات درون‌خطی ارجاع دهید.

نصب#

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
کپی

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 }

استفاده#

کپیimport { Kbd } from "@/components/ui/kbd"

کپی<Kbd>Ctrl</Kbd>

ترکیب#

برای ساخت Kbd و KbdGroup، از ترکیب زیر استفاده کنید:

کپیKbd
KbdGroup
├── Kbd
└── Kbd

نمونه‌ها#

گروه#

برای گروه‌بندی کلیدهای صفحه‌کلید، از کامپوننت KbdGroup استفاده کنید.

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

export function KbdGroupExample() {

دکمه#

برای نمایش یک کلید صفحه‌کلید درون یک دکمه، از کامپوننت Kbd در داخل کامپوننت Button استفاده کنید.

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

Tooltip#

می‌توانید برای نمایش یک tooltip با کلید صفحه‌کلید، از کامپوننت Kbd در داخل کامپوننت Tooltip استفاده کنید.

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

Input Group#

می‌توانید برای نمایش یک کلید صفحه‌کلید درون یک input group، از کامپوننت Kbd در داخل کامپوننت InputGroupAddon استفاده کنید.

import { SearchIcon } from "lucide-react"

import {

RTL#

برای فعال‌سازی پشتیبانی RTL در Neobrutalism، راهنمای پیکربندی RTL را ببینید.

"use client"

import * as React from "react"

دسترسی‌پذیری#

Kbd یک عنصر بومی <kbd> رندر می‌کند — semantics درست HTML برای ورودی صفحه‌کلید — و کاملاً presentational است: pointer-events-none، select-none، چیزی focusable نیست. وقتی میانبری واقعاً کار می‌کند، آن را روی کنترلی که هندل می‌کند هم با aria-keyshortcuts اعلام کنید (مثلاً aria-keyshortcuts="Control+B" روی دکمه) تا فناوری کمکی اعلامش کند. گلیف‌های نماد مثل ⌘ را صفحه‌خوان‌ها ناسازگار اعلام می‌کنند — جایی که میانبر مهم است نام کلید را بنویسید.

مرجع API#

Kbd#

برای نمایش یک کلید صفحه‌کلید، از کامپوننت Kbd استفاده کنید.

کپی<Kbd>Ctrl</Kbd>

KbdGroup#

برای گروه‌بندی کامپوننت‌های Kbd، از کامپوننت KbdGroup استفاده کنید.

کپی<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>B</Kbd>
</KbdGroup>