键盘键

用于菜单、工具提示和命令面板中快捷键提示的键盘键帽——一个带有新粗野主义风格边框和阴影的原生 kbd 元素。

⌘⇧⌥⌃Ctrl+B

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

export function KbdDemo() {

Kbd 组件渲染键帽——样式化的原生 <kbd> 元素，无基元依赖，并套上新粗野主义配方：粗边框、硬阴影与等宽字体。两个后端变体共用同一份文件。

适合以下场景：

命令面板与搜索——在触发器旁或输入框内展示 ⌘ K 提示。
菜单项与工具提示——把快捷键写在操作标签旁，让用户就地学会。
文档与更新日志——在正文中引用确切按键，无需截图。

安装


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

将以下代码复制并粘贴到您的项目中。

components/ui/kbd.tsx

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 组件将键盘按键组合在一起。

Use Ctrl + BCtrl + K to open the command palette

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

export function KbdGroupExample() {

按钮

在 Button 组件内部使用 Kbd 组件，可在按钮内展示键盘按键。

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

工具提示

可在 Tooltip 组件内部使用 Kbd 组件，展示带键盘按键的工具提示。

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

Input Group

可在 InputGroupAddon 组件内部使用 Kbd 组件，在输入组内展示键盘按键。

⌘K

import { SearchIcon } from "lucide-react"

import {

RTL

若要在 Neobrutalism 中启用 RTL 支持，请参阅 RTL 配置指南。

⌘⇧⌥⌃Ctrl+B

"use client"

import * as React from "react"

Kbd 渲染原生 <kbd> 元素——这是表示键盘输入的正确 HTML 语义——且纯属表现层：pointer-events-none、select-none，没有任何可聚焦内容。当快捷键真正生效时，还要在处理该快捷键的控件上声明 aria-keyshortcuts（例如在按钮上设 aria-keyshortcuts="Control+B"），以便辅助技术播报。⌘ 一类符号字形的播报不一致——在快捷键很重要的场景，请写全按键名称。

API 参考

Kbd

使用 Kbd 组件展示键盘按键。

Prop	Type	Default
`className`	`string`	``

<Kbd>Ctrl</Kbd>

KbdGroup

使用 KbdGroup 组件将 Kbd 组件组合在一起。

Prop	Type	Default
`className`	`string`	``

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