Kbd
Displays a keyboard key or shortcut.
Last updated August 9, 2026
CreditsUnchangedPublished
Copied from shadcn/ui.
Overview
⌘K
import { Kbd } from "@/components/ui/kbd"
export function KbdDemoExample() {
return (
<div dir="ltr" className="flex items-center gap-1">
<Kbd>⌘</Kbd>
<Kbd>K</Kbd>
</div>
)
}Installation
$ npx shadcn@latest add https://ui.persian-labs.ir/r/kbd.jsonUsage
import { Kbd } from "@/components/ui/kbd"
export function Example() {
return <Kbd>⌘K</Kbd>
}Inline
Press ⌘Enter to submit.
import { Kbd } from "@/components/ui/kbd"
export function KbdInlineExample() {
return (
<p className="text-sm text-muted-foreground">
Press{" "}
<span dir="ltr" className="inline-flex items-center gap-1">
<Kbd>⌘</Kbd>
<Kbd>Enter</Kbd>
</span>{" "}
to submit.
</p>
)
}RTL
Keyboard shortcuts are always Latin characters, so Kbd forces dir="ltr" internally — the key itself stays left-to-right even while the surrounding Farsi sentence reads right-to-left. When a shortcut has more than one key, wrap them together in their own dir="ltr" container — otherwise the bidi algorithm can reorder two separately-LTR keys relative to each other inside RTL text, so "⌘K" could visually read as "K⌘".
برای جستوجو ⌘K را فشار دهید.
import { Kbd } from "@/components/ui/kbd"
export function KbdRtlExample() {
return (
<p className="text-sm text-muted-foreground">
برای جستوجو{" "}
<span dir="ltr" className="inline-flex items-center gap-1">
<Kbd>⌘</Kbd>
<Kbd>K</Kbd>
</span>{" "}
را فشار دهید.
</p>
)
}