✦ 组件@anibt/kbdregistry JSON

Kbd

键帽：20 高的下沉小块，底下一道 1px 的边，圆体字。

按 ⌘K 搜索番剧，esc 关闭

Ctrl+B

kbd-demo.tsx

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

export default function KbdDemo() {
  return (
    <div className="flex flex-col items-center gap-4 text-[13px] text-anibt-ink2">
      <p className="flex items-center gap-1.5">
        按 <Kbd>⌘K</Kbd> 搜索番剧，<Kbd>esc</Kbd> 关闭
      </p>
      <KbdGroup>
        <Kbd>Ctrl</Kbd>
        <span className="text-muted-foreground">+</span>
        <Kbd>B</Kbd>
      </KbdGroup>
    </div>
  )
}

安装

npx shadcn@latest add @anibt/kbd

第一次用之前：在 components.json 里登记 @anibt，再单独运行一次 npx shadcn@latest add @anibt/theme（见快速开始）。只有单独安装主题时，CLI 才会把 shadcn 的标准颜色换成白樱 / 夜樱；随组件带进来的主题只补上 AniBT 自己的变量和配方。

手动安装

1. 先装主题组件只读 @anibt/theme 的 token 和配方，没有主题就没有样子。
npx shadcn@latest add @anibt/theme

2. 把下面的文件放进项目

components/ui/kbd.tsx

import * as React from "react"

import { cn } from "@/lib/utils"

/**
 * Kbd — an AniBT 「贴纸手账」 key cap: ⌘K in a search field, esc and ↑ ↓ ↵
 * along a palette's legend.
 *
 * A sunk 20px cap on radius 6: the `--muted` well inside a 1px `--border`
 * ring with a 1px `--input` floor, the figure in the round face (Fredoka
 * 600/12). It is the `anibt-kbd` recipe spelled out in classes, so a caller's
 * `hidden sm:inline-flex` merges. Inside a tooltip (`data-slot=
 * "tooltip-content"`) it turns into a faint cap on the dark bubble.
 *
 * `KbdGroup` sets a few caps side by side (Ctrl + K).
 */
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 shrink-0 items-center justify-center gap-0.5 rounded-[6px] bg-muted px-1 font-anibt-display text-[12px] leading-none font-semibold text-muted-foreground shadow-[inset_0_-1px_0_var(--input),inset_0_0_0_1px_var(--border)] select-none",
        "in-data-[slot=tooltip-content]:bg-anibt-tip-ink/15 in-data-[slot=tooltip-content]:text-anibt-tip-ink in-data-[slot=tooltip-content]:shadow-none",
        "[&_svg:not([class*='size-'])]:size-3",
        className
      )}
      {...props}
    />
  )
}

function KbdGroup({ className, ...props }: React.ComponentProps<"kbd">) {
  return <kbd data-slot="kbd-group" className={cn("inline-flex items-center gap-1", className)} {...props} />
}

export { Kbd, KbdGroup }

用法

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

<Kbd>⌘K</Kbd>

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

键帽是 muted 底、一圈 border 细边，底边多一道 input 色的 1px，像按下去的键；字是 Fredoka 600/12。它只是提示，不可点击（pointer-events-none），绑定快捷键是页面自己的事。

图例

↑↓选择↵打开esc关闭

kbd-legend.tsx

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

export default function KbdLegend() {
  return (
    <div className="anibt-stitch-over flex w-full max-w-md flex-wrap items-center gap-x-4 gap-y-2 pt-3 text-[12px] text-muted-foreground">
      <span className="inline-flex items-center gap-1.5">
        <KbdGroup>
          <Kbd>↑</Kbd>
          <Kbd>↓</Kbd>
        </KbdGroup>
        选择
      </span>
      <span className="inline-flex items-center gap-1.5">
        <Kbd>↵</Kbd>
        打开
      </span>
      <span className="inline-flex items-center gap-1.5">
        <Kbd>esc</Kbd>
        关闭
      </span>
    </div>
  )
}

命令面板底部的操作说明：键帽在前，12px 的说明在后。放进提示气泡（data-slot="tooltip-content"）时，键帽变成深色气泡上的浅色小块。

属性

Kbd

属性类型默认值说明

childrenReactNode默认 —键名：⌘K、esc、↵，或一个 16px 以下的图标

KbdGroup 把几个键帽排成一行，间距 4px。两者都透传 <kbd> 的属性。