कीबोर्ड

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

export function KbdDemo() {

kbd कंपोनेंट एक की कैप रेंडर करता है — स्टाइल किया नेटिव <kbd> एलिमेंट, कोई प्रिमिटिव डिपेंडेंसी नहीं, नियोब्रूटलिस्ट रेसिपी: मोटे बॉर्डर, कठोर छाया, और mono टाइप। दोनों बैकएंड वैरिएंट एक ही फ़ाइल भेजते हैं।

इसे इन स्थितियों में चुनें:

• कमांड पैलेट और सर्च — ट्रिगर के पास या इनपुट के अंदर ⌘ K संकेत दिखाएँ।
• मेनू आइटम और टूलटिप — एक्शन लेबल के बगल में शॉर्टकट रखें ताकि उपयोगकर्ता वहीं सीखें।
• डॉक्स और चेंजलॉग — स्क्रीनशॉट के बिना सटीक कुंजी प्रेस इनलाइन लिखें।

इंस्टॉलेशन#

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() {

बटन#

किसी बटन के अंदर कीबोर्ड की दिखाने के लिए Button कंपोनेंट के अंदर Kbd कंपोनेंट का उपयोग करें.

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

Tooltip#

आप कीबोर्ड की के साथ एक tooltip दिखाने के लिए Tooltip कंपोनेंट के अंदर Kbd कंपोनेंट का उपयोग कर सकते हैं.

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

Input Group#

आप किसी input group के अंदर कीबोर्ड की दिखाने के लिए InputGroupAddon कंपोनेंट के अंदर Kbd कंपोनेंट का उपयोग कर सकते हैं.

import { SearchIcon } from "lucide-react"

import {

RTL#

Neobrutalism में RTL समर्थन सक्षम करने के लिए, RTL कॉन्फ़िगरेशन गाइड देखें.

"use client"

import * as React from "react"

एक्सेसिबिलिटी#

Kbd नेटिव <kbd> एलिमेंट रेंडर करता है — कीबोर्ड इनपुट के लिए सही HTML सेमेंटिक्स — और पूरी तरह प्रेजेंटेशनल है: pointer-events-none, select-none, कुछ भी फ़ोकस-योग्य नहीं। जब शॉर्टकट वास्तव में काम करे, उसे संभालने वाले कंट्रोल पर भी aria-keyshortcuts से घोषित करें (जैसे बटन पर aria-keyshortcuts="Control+B") ताकि असिस्टिव टेक घोषणा कर सकें। ⌘ जैसे सिंबल ग्लिफ़ स्क्रीन रीडर पर असंगत घोषित होते हैं — जहाँ शॉर्टकट मायने रखे, कुंजी नाम लिखें।

API रेफ़रेंस#

Kbd#

कीबोर्ड की दिखाने के लिए Kbd कंपोनेंट का उपयोग करें.

कॉपी करें<Kbd>Ctrl</Kbd>

KbdGroup#

Kbd कंपोनेंट को एक साथ समूहित करने के लिए KbdGroup कंपोनेंट का उपयोग करें.

कॉपी करें<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>B</Kbd>
</KbdGroup>