Клавіша

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

export function KbdDemo() {

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

Коли це стане в пригоді:

• Command palette і пошук — показуйте підказку ⌘ K біля тригера або всередині поля.
• Пункти меню та tooltip — ставте скорочення біля мітки дії, щоб користувач вивчав його на місці.
• Документація та changelog — посилайтеся на точні натискання клавіш у тексті без скріншотів.

Встановлення#

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

Довідник API#

Kbd#

Використовуйте компонент Kbd, щоб показати клавішу клавіатури.

Скопіювати<Kbd>Ctrl</Kbd>

KbdGroup#

Використовуйте компонент KbdGroup, щоб згрупувати компоненти Kbd.

Скопіювати<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>B</Kbd>
</KbdGroup>