מקש

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

export function KbdDemo() {

רכיב ה-kbd מציג מקש — אלמנט <kbd> מקורי מעוצב בלי תלות בפרימיטיב, לבוש במתכון הנאו-ברוטליסטי: מסגרות עבות, צל חד וטיפוגרפיית mono. שני הווריאנטים של ה-backend מגיעים עם אותו קובץ.

השתמשו בו כש:

• לוחות פקודות וחיפוש — מציגים את הרמז ⌘ K ליד הטריגר או בתוך השדה.
• פריטי תפריט ו-tooltips — שמים את הקיצור ליד תווית הפעולה כדי שהמשתמשים ילמדו אותו במקום.
• תיעוד ו-changelogs — מתייחסים ללחיצות מקשים מדויקות בשורה בלי צילומי מסך.

התקנה#

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"

טולטיפ#

ניתן להשתמש ברכיב Kbd בתוך רכיב Tooltip כדי להציג טולטיפ עם מקש מקלדת.

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

קבוצת קלט#

ניתן להשתמש ברכיב Kbd בתוך רכיב InputGroupAddon כדי להציג מקש מקלדת בתוך קבוצת קלט.

import { SearchIcon } from "lucide-react"

import {

RTL#

כדי להפעיל RTL ב-Neobrutalism, עיינו במדריך ההגדרה של 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#

השתמשו ברכיב KbdGroup כדי לקבץ יחד רכיבי Kbd.

העתקה<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>B</Kbd>
</KbdGroup>