Клавиша

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

export function KbdDemo() {

Компонент kbd рендерит «клавишу» — стилизованный нативный <kbd> без зависимости от примитива, по рецепту необрутализма: толстые рамки, жёсткая тень и mono-шрифт. Обе backend-вариации поставляют один и тот же файл.

Когда это пригодится:

• Command palette и поиск — покажите подсказку ⌘ K рядом с триггером или внутри input.
• Пункты меню и тултипы — поставьте shortcut рядом с label действия, чтобы пользователь запоминал его на месте.
• Документация и changelog — ссылайтесь на точные нажатия клавиш inline, без скриншотов.

Установка#

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"

Tooltip#

Вы можете использовать компонент Kbd внутри компонента Tooltip, чтобы показать всплывающую подсказку с клавишей клавиатуры.

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

Input Group#

Вы можете использовать компонент 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, ничего не фокусируется. Когда shortcut реально работает, объявите его и на контроле, который его обрабатывает, через aria-keyshortcuts (например aria-keyshortcuts="Control+B" на кнопке), чтобы ассистивные технологии могли его объявить. Глифы вроде ⌘ программы чтения с экрана объявляют непоследовательно — там, где shortcut важен, проговаривайте имена клавиш словами.

Справочник API#

Kbd#

Используйте компонент Kbd, чтобы показать клавишу клавиатуры.

Скопировать<Kbd>Ctrl</Kbd>

KbdGroup#

Используйте компонент KbdGroup, чтобы сгруппировать компоненты Kbd.

Скопировать<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>B</Kbd>
</KbdGroup>