キーボード

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

export function KbdDemo() {

Kbd はキーキャップを描画します。プリミティブ依存のない、スタイル付きのネイティブ <kbd> 要素 で、ネオブルータリストのレシピに沿っています。太い枠線、硬い影、等幅フォントです。両バックエンドとも同じファイルを同梱します。

次のような場面で使います：

• コマンドパレットと検索 — トリガー横や入力内に ⌘ K のヒントを表示。
• メニュー項目とツールチップ — アクションラベルの横にショートカットを置き、その場で覚えられるように。
• ドキュメントと変更履歴 — スクリーンショットなしで、具体的なキー操作をインラインで示す。

インストール#

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"

ツールチップ#

Kbd コンポーネントを Tooltip コンポーネントの内側で使うと、キーボードのキーを示すツールチップを表示できます。

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

入力グループ#

Kbd コンポーネントを InputGroupAddon コンポーネントの内側で使うと、入力グループ内にキーボードのキーを表示できます。

import { SearchIcon } from "lucide-react"

import {

RTL#

Neobrutalism で RTL を有効にする方法は、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>