Toets

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

export function KbdDemo() {

De kbd-component rendert een toetskap — een gestyled native <kbd>-element zonder primitive-dependency, gestoken in het neobrutalistische recept: dikke randen, een scherpe schaduw en monospace-letters. Beide backend-varianten leveren hetzelfde bestand.

Ideaal voor:

• Commandopaletten en zoeken — toon de ⌘ K-hint naast de trigger of in het invoerveld.
• Menu-items en tooltips — zet de sneltoets naast het actielabel, zodat gebruikers hem ter plekke leren.
• Documentatie en changelogs — verwijs inline naar exacte toetsaanslagen zonder screenshots.

Installatie#

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
Kopiëren

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 }

Gebruik#

Kopiërenimport { Kbd } from "@/components/ui/kbd"

Kopiëren<Kbd>Ctrl</Kbd>

Compositie#

Gebruik de volgende compositie om Kbd en KbdGroup op te bouwen:

KopiërenKbd
KbdGroup
├── Kbd
└── Kbd

Voorbeelden#

Groep#

Gebruik de component KbdGroup om toetsenbordtoetsen te groeperen.

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

export function KbdGroupExample() {

Knop#

Gebruik de component Kbd binnen een Button-component om een toetsenbordtoets in een knop te tonen.

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

Tooltip#

Je kunt de component Kbd binnen een Tooltip-component gebruiken om een tooltip met een toetsenbordtoets te tonen.

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

Input Group#

Je kunt de component Kbd binnen een InputGroupAddon-component gebruiken om een toetsenbordtoets in een input group te tonen.

import { SearchIcon } from "lucide-react"

import {

RTL#

Om RTL-ondersteuning in Neobrutalism in te schakelen, zie de RTL-configuratiegids.

"use client"

import * as React from "react"

Toegankelijkheid#

Kbd rendert een native <kbd>-element — de correcte HTML-semantiek voor toetsenbordinvoer — en is puur presentationeel: pointer-events-none, select-none, niets dat focus krijgt. Werkt een sneltoets ook echt, declareer hem dan daarnaast via aria-keyshortcuts op het besturingselement dat hem afhandelt (bijv. aria-keyshortcuts="Control+B" op de knop), zodat ondersteunende technologie hem kan aankondigen. Symboolglyphs zoals ⌘ worden door schermlezers wisselend voorgelezen — schrijf toetsnamen voluit waar de sneltoets ertoe doet.

API-referentie#

Kbd#

Gebruik de component Kbd om een toetsenbordtoets te tonen.

Kopiëren<Kbd>Ctrl</Kbd>

KbdGroup#

Gebruik de component KbdGroup om Kbd-componenten te groeperen.

Kopiëren<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>B</Kbd>
</KbdGroup>