Klawisz

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

export function KbdDemo() {

Komponent kbd renderuje klawisz — ostylowany natywny element <kbd> bez zależności od prymitywu, ubrany w neobrutalistyczną recepturę: grube obramowania, twardy cień i pismo mono. Oba warianty backendu dostarczają ten sam plik.

Sięgnij po ten komponent, gdy:

• Palety poleceń i wyszukiwanie — pokaż podpowiedź ⌘ K obok wyzwalacza lub wewnątrz pola.
• Pozycje menu i dymki podpowiedzi — umieść skrót obok etykiety akcji, aby użytkownicy uczyli się go w miejscu użycia.
• Dokumentacja i listy zmian — przywołuj dokładne kombinacje klawiszy w tekście, bez zrzutów ekranu.

Instalacja#

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
Kopiuj

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 }

Użycie#

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

Kopiuj<Kbd>Ctrl</Kbd>

Kompozycja#

Użyj poniższej kompozycji, aby zbudować Kbd i KbdGroup:

KopiujKbd
KbdGroup
├── Kbd
└── Kbd

Przykłady#

Grupa#

Użyj komponentu KbdGroup, aby zgrupować klawisze klawiatury.

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

export function KbdGroupExample() {

Przycisk#

Użyj komponentu Kbd wewnątrz komponentu Button, aby wyświetlić klawisz klawiatury wewnątrz przycisku.

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

Tooltip#

Możesz użyć komponentu Kbd wewnątrz komponentu Tooltip, aby wyświetlić tooltip z klawiszem klawiatury.

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

Input Group#

Możesz użyć komponentu Kbd wewnątrz komponentu InputGroupAddon, aby wyświetlić klawisz klawiatury wewnątrz input group.

import { SearchIcon } from "lucide-react"

import {

RTL#

Aby włączyć obsługę RTL w Neobrutalism, zobacz przewodnik konfiguracji RTL.

"use client"

import * as React from "react"

Dostępność#

Kbd renderuje natywny element <kbd> — poprawną semantykę HTML dla wprowadzania z klawiatury — i jest czysto prezentacyjny: pointer-events-none, select-none, nic fokusowalnego. Gdy skrót faktycznie działa, zadeklaruj go też na obsługującej go kontrolce przez aria-keyshortcuts (np. aria-keyshortcuts="Control+B" na przycisku), aby technologie wspomagające mogły go ogłosić. Symbole takie jak ⌘ czytniki ekranu odczytują niespójnie — tam, gdzie skrót ma znaczenie, zapisuj nazwy klawiszy słownie.

Referencja API#

Kbd#

Użyj komponentu Kbd, aby wyświetlić klawisz klawiatury.

Kopiuj<Kbd>Ctrl</Kbd>

KbdGroup#

Użyj komponentu KbdGroup, aby zgrupować komponenty Kbd.

Kopiuj<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>B</Kbd>
</KbdGroup>