Kbd

Displays a keyboard key or shortcut.

Last updated January 1, 1980

Overview

Installation

$ pnpm dlx shadcn@latest add @persianlabsui/kbd

Usage

import { Kbd } from "@/components/ui/kbd"
 
export function Example() {
  return <Kbd>⌘K</Kbd>
}

Examples

Inline

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⌘".

API Reference