Shadcn
Kbd 键盘按键
以内联样式展示快捷键或键盘输入提示。
Preview
打开搜索Ctrl+K
import { Kbd, KbdGroup } from "@scopify/ui/shadcn/components/kbd"
export default function KbdDemo() {
return (
<div className="flex flex-col items-center gap-4">
<KbdGroup>
<Kbd>⌘</Kbd>
<Kbd>⇧</Kbd>
<Kbd>⌥</Kbd>
<Kbd>⌃</Kbd>
</KbdGroup>
<KbdGroup>
<Kbd>Ctrl</Kbd>
<span>+</span>
<Kbd>B</Kbd>
</KbdGroup>
</div>
)
}
Scopify 说明
本页按 shadcn/ui 官方 Radix UI 组件文档的章节与示例完整整理。示例预览使用 Scopify 当前的 @scopify/ui/shadcn 实现；导入路径、主题 Token 和行为差异以本仓库源码为准。
Installation
npx shadcn@latest add kbdUsage
import { Kbd } from "@scopify/ui/shadcn/components/kbd"<Kbd>Ctrl</Kbd>Composition
Use the following composition to build Kbd and KbdGroup:
Kbd
KbdGroup
├── Kbd
└── KbdGroup
Use the KbdGroup component to group keyboard keys together.
Preview
打开搜索Ctrl+K
import { Kbd, KbdGroup } from "@scopify/ui/shadcn/components/kbd"
export default function KbdGroupExample() {
return (
<div className="flex flex-col items-center gap-4">
<p className="text-sm text-muted-foreground">
Use{" "}
<KbdGroup>
<Kbd>Ctrl + B</Kbd>
<Kbd>Ctrl + K</Kbd>
</KbdGroup>{" "}
to open the command palette
</p>
</div>
)
}
Button
Use the Kbd component inside a Button component to display a keyboard key inside a button.
Preview
打开搜索Ctrl+K
import { Button } from "@scopify/ui/shadcn/components/button"
import { Kbd } from "@scopify/ui/shadcn/components/kbd"
export default function KbdButton() {
return (
<Button variant="outline">
Accept{" "}
<Kbd data-icon="inline-end" className="translate-x-0.5">
⏎
</Kbd>
</Button>
)
}
Tooltip
You can use the Kbd component inside a Tooltip component to display a tooltip with a keyboard key.
Preview
打开搜索Ctrl+K
import { Button } from "@scopify/ui/shadcn/components/button"
import { ButtonGroup } from "@scopify/ui/shadcn/components/button-group"
import { Kbd, KbdGroup } from "@scopify/ui/shadcn/components/kbd"
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@scopify/ui/shadcn/components/tooltip"
export default function KbdTooltip() {
return (
<div className="flex flex-wrap gap-4">
<ButtonGroup>
<Tooltip>
<TooltipTrigger asChild>
<Button variant="outline">Save</Button>
</TooltipTrigger>
<TooltipContent>
Save Changes <Kbd>S</Kbd>
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Button variant="outline">Print</Button>
</TooltipTrigger>
<TooltipContent>
Print Document{" "}
<KbdGroup>
<Kbd>Ctrl</Kbd>
<Kbd>P</Kbd>
</KbdGroup>
</TooltipContent>
</Tooltip>
</ButtonGroup>
</div>
)
}
Input Group
You can use the Kbd component inside a InputGroupAddon component to display a keyboard key inside an input group.
Preview
打开搜索Ctrl+K
import { SearchIcon } from "lucide-react"
import {
InputGroup,
InputGroupAddon,
InputGroupInput,
} from "@scopify/ui/shadcn/components/input-group"
import { Kbd } from "@scopify/ui/shadcn/components/kbd"
export default function KbdInputGroup() {
return (
<div className="flex w-full max-w-xs flex-col gap-6">
<InputGroup>
<InputGroupInput placeholder="Search..." />
<InputGroupAddon>
<SearchIcon />
</InputGroupAddon>
<InputGroupAddon align="inline-end">
<Kbd>⌘</Kbd>
<Kbd>K</Kbd>
</InputGroupAddon>
</InputGroup>
</div>
)
}
RTL
To enable RTL support in shadcn/ui, see the RTL configuration guide.
Preview
打开搜索Ctrl+K
"use client"
import * as React from "react"
import {
useTranslation,
type Translations,
} from "@/components/language-selector"
import { Kbd, KbdGroup } from "@/styles/radix-nova/ui-rtl/kbd"
const translations: Translations = {
en: {
dir: "ltr",
values: {},
},
ar: {
dir: "rtl",
values: {},
},
he: {
dir: "rtl",
values: {},
},
}
export function KbdRtl() {
const { dir } = useTranslation(translations, "ar")
return (
<div className="flex flex-col items-center gap-4" dir={dir}>
<KbdGroup>
<Kbd>⌘</Kbd>
<Kbd>⇧</Kbd>
<Kbd>⌥</Kbd>
<Kbd>⌃</Kbd>
</KbdGroup>
<KbdGroup>
<Kbd>Ctrl</Kbd>
<span>+</span>
<Kbd>B</Kbd>
</KbdGroup>
</div>
)
}
API Reference
Kbd
Use the Kbd component to display a keyboard key.
| Prop | Type | Default |
|---|---|---|
className | string | `` |
<Kbd>Ctrl</Kbd>KbdGroup
Use the KbdGroup component to group Kbd components together.
| Prop | Type | Default |
|---|---|---|
className | string | `` |
<KbdGroup>
<Kbd>Ctrl</Kbd>
<Kbd>B</Kbd>
</KbdGroup>