Kbd
fandhe-frontend-pre-styled-ui の kbd mod が提供するスタイル済み Kbd 部品です。
Demo
キーボード入力・ショートカット表示。variant / size / colorPalette を組み合わせます。group（イシュー #2048、shadcn/ui KbdGroup 相当）で複数キーを組み合わせ表示できます。
Ctrl + K
Variant
RaisedSubtleOutline
Size
EscEscEscEscEsc
Palette
AccentInfoSuccessWarningDangerNeutral
⌘⇧⌥⌃Ctrl+B
Features
- キーボード入力・ショートカット表示のための単一 recipe styled 部品（<kbd>）
- variant（raised/subtle/outline）3 種、size 5 段、colorPalette 6 値を持つ（イシュー #1436、code と同型の単一 recipe パターン）
- group（shadcn/ui KbdGroup 相当、イシュー #2048）で複数の kbd を横並びに組み合わせ表示できる（headless anatomy に存在しない pre-styled-only パート）
Anatomy
root
groupAPI Reference
Arguments
| Name | Type | Default | Description |
|---|---|---|---|
variant | KbdVariant | Raised | 見た目のバリアント（raised/subtle/outline）。 |
size | Size | Md | サイズ軸（xs/sm/md/lg/xl）。 |
palette | ColorPalette | Neutral | colorPalette 軸。 |
Examples
キーの組み合わせ・variant 3 種
複数の kbd をテキストで連結してショートカットを表現し、raised/subtle/outline の見た目を並べます。
Ctrl + Ksubtleoutline
キーの組み合わせ（group）
group（shadcn/ui KbdGroup 相当、イシュー #2048）で複数の kbd を横並びに組み合わせ表示します。button ページの「ボタン内の kbd」・tooltip ページの「kbd を含む tooltip」も合わせて参照してください。
⌘⇧⌥⌃Ctrl+B