Raccourci clavier

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

export function KbdDemo() {

Le composant kbd rend une touche de clavier — un élément <kbd> natif stylé, sans dépendance à une primitive, habillé selon la recette néobrutaliste : bordures épaisses, ombre franche et police mono. Les deux variantes de backend livrent le même fichier.

À privilégier pour :

• Palettes de commandes et recherche — affichez le rappel ⌘ K à côté du déclencheur ou dans le champ.
• Éléments de menu et infobulles — placez le raccourci à côté du libellé de l’action pour que l’utilisateur l’apprenne en contexte.
• Docs et changelogs — citez des frappes exactes dans le texte, sans capture d’écran.

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
Copier

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 }

Utilisation#

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

Copier<Kbd>Ctrl</Kbd>

Composition#

Utilisez la composition suivante pour construire Kbd et KbdGroup :

CopierKbd
KbdGroup
├── Kbd
└── Kbd

Exemples#

Groupe#

Utilisez le composant KbdGroup pour regrouper plusieurs touches du clavier.

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

export function KbdGroupExample() {

Bouton#

Utilisez le composant Kbd à l'intérieur d'un composant Button pour afficher une touche du clavier dans un bouton.

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

Infobulle#

Vous pouvez utiliser le composant Kbd à l'intérieur d'un composant Tooltip pour afficher une infobulle avec une touche du clavier.

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

Groupe de saisie#

Vous pouvez utiliser le composant Kbd à l'intérieur d'un composant InputGroupAddon pour afficher une touche du clavier dans un groupe de saisie.

import { SearchIcon } from "lucide-react"

import {

RTL#

Pour activer le RTL dans Neobrutalism, consultez le guide de configuration RTL.

"use client"

import * as React from "react"

Accessibilité#

Kbd rend un élément <kbd> natif — la sémantique HTML correcte pour une saisie clavier — et reste purement présentationnel : pointer-events-none, select-none, rien de focalisable. Quand un raccourci fonctionne réellement, déclarez-le aussi via aria-keyshortcuts sur le contrôle qui le gère (par exemple aria-keyshortcuts="Control+B" sur le bouton) pour que les technologies d’assistance puissent l’annoncer. Les glyphes symboliques comme ⌘ sont annoncés de façon incohérente par les lecteurs d’écran — écrivez les noms de touches en toutes lettres là où le raccourci compte.

Référence API#

Kbd#

Utilisez le composant Kbd pour afficher une touche du clavier.

Copier<Kbd>Ctrl</Kbd>

KbdGroup#

Utilisez le composant KbdGroup pour regrouper plusieurs composants Kbd.

Copier<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>B</Kbd>
</KbdGroup>