104Get started
HextaUI

Kbd: Right to left

Shortcuts stay in left-to-right order inside right-to-left text, the way they're printed on the keyboard.

اضغطShiftCommandPلفتح لوحة الأوامر، أو Escape للإغلاق

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

export function KbdRtl() {
  return (
    <p
      dir="rtl"
      className="flex items-center gap-2 text-sm text-muted-foreground"
    >
      اضغط
      <KbdGroup keys="mod+shift+p" />
      لفتح لوحة الأوامر، أو <Kbd keys="escape" /> للإغلاق
    </p>
  )
}

Add this example

This adds the example as components/examples/kbd/rtl.tsx, together with the Kbd component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/kbd-rtl.json

To add only the component, follow the Kbd installation.

Props in this example

The Kbd props this example sets, from the API reference.

Kbd

PropTypeDefault
keysKeys joined with +, like "mod+shift+p". mod is ⌘ on Apple devices and Ctrl elsewhere. Names such as alt, enter, escape, up and space become symbols or short words, and get a spoken name for screen readers.
string–

KbdGroup

PropTypeDefault
keysKeys joined with +, like "mod+shift+p". mod is ⌘ on Apple devices and Ctrl elsewhere. Names such as alt, enter, escape, up and space become symbols or short words, and get a spoken name for screen readers. Spaces separate the steps of a sequence.
string–

Every prop is in the Kbd API reference.

More Kbd examples

See them all, with keyboard support and accessibility notes, on the Kbd page.

Related components