Tastenkürzel

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

export function KbdDemo() {

Die Kbd-Komponente rendert eine Tastenkappe – ein gestyltes natives <kbd>-Element ohne Primitive-Abhängigkeit, gekleidet in das neobrutalistische Rezept: dicke Rahmen, harter Schatten und Mono-Schrift. Beide Backend-Varianten liefern dieselbe Datei aus.

Typische Anwendungsfälle:

• Befehlspaletten und Suche – zeige den ⌘ K-Hinweis neben dem Trigger oder direkt im Eingabefeld.
• Menüeinträge und Tooltips – setze das Tastenkürzel neben die Aktionsbeschriftung, damit es dort gelernt wird, wo es gebraucht wird.
• Doku und Changelogs – verweise inline auf exakte Tastendrücke, ganz ohne Screenshots.

Installation#

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
Kopieren

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 }

Verwendung#

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

Kopieren<Kbd>Ctrl</Kbd>

Komposition#

Verwende die folgende Komposition, um Kbd und KbdGroup aufzubauen:

KopierenKbd
KbdGroup
├── Kbd
└── Kbd

Beispiele#

Gruppe#

Verwende die Komponente KbdGroup, um Tastaturtasten zu gruppieren.

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

export function KbdGroupExample() {

Button#

Verwende die Komponente Kbd innerhalb einer Button-Komponente, um eine Tastaturtaste in einem Button anzuzeigen.

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

Tooltip#

Du kannst die Komponente Kbd innerhalb einer Tooltip-Komponente verwenden, um einen Tooltip mit einer Tastaturtaste anzuzeigen.

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

Input Group#

Du kannst die Komponente Kbd innerhalb einer InputGroupAddon-Komponente verwenden, um eine Tastaturtaste in einer Input Group anzuzeigen.

import { SearchIcon } from "lucide-react"

import {

RTL#

Um RTL-Unterstützung in Neobrutalism zu aktivieren, sieh dir die RTL-Konfigurationsanleitung an.

"use client"

import * as React from "react"

Barrierefreiheit#

Kbd rendert ein natives <kbd>-Element – die korrekte HTML-Semantik für Tastatureingaben – und ist rein präsentational: pointer-events-none, select-none, nichts Fokussierbares. Funktioniert ein Kürzel tatsächlich, deklariere es zusätzlich über aria-keyshortcuts auf dem Steuerelement, das es verarbeitet (z. B. aria-keyshortcuts="Control+B" auf dem Button), damit assistive Technologien es ankündigen können. Symbol-Glyphen wie ⌘ lesen Screenreader uneinheitlich vor – schreibe Tastennamen aus, wo es auf das Kürzel ankommt.

API-Referenz#

Kbd#

Verwende die Komponente Kbd, um eine Tastaturtaste anzuzeigen.

Kopieren<Kbd>Ctrl</Kbd>

KbdGroup#

Verwende die Komponente KbdGroup, um Kbd-Komponenten zu gruppieren.

Kopieren<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>B</Kbd>
</KbdGroup>