Components — Modern React UI Library

Examples

Simple Shortcuts

Single key or two-key combos rendered as keyboard badges.

Simple

EscapeEnterTabCtrl+S

import { Shortcut } from "@g4rcez/components/display/shortcut";

function SimpleShortcuts() {
  return (
    <div className="flex flex-wrap gap-4">
      <Shortcut value="Escape" />
      <Shortcut value="Enter" />
      <Shortcut value="Tab" />
      <Shortcut value="Ctrl+S" />
    </div>
  );
}

Platform-Adaptive Modifiers

Mod renders as ⌘ on macOS and Ctrl on other platforms. Alt renders as ⌥ on macOS.

Platform-adaptive

Ctrl+KCtrl+Shift+PAlt+F4

import { Shortcut } from "@g4rcez/components/display/shortcut";

function PlatformAdaptive() {
  return (
    <div className="flex flex-wrap gap-4">
      <Shortcut value="Mod+K" />
      <Shortcut value="Mod+Shift+P" />
      <Shortcut value="Alt+F4" />
    </div>
  );
}

Shortcuts in Context

Shortcuts paired with their actions in a command list.

In context

Open command paletteCtrl+K
Save documentCtrl+S
Find in fileCtrl+F
Close tabCtrl+W

import { Shortcut } from "@g4rcez/components/display/shortcut";

function ShortcutsInContext() {
  const commands = [
    { label: "Open command palette", shortcut: "Mod+K" },
    { label: "Save document", shortcut: "Mod+S" },
    { label: "Find in file", shortcut: "Mod+F" },
    { label: "Close tab", shortcut: "Mod+W" },
  ];
  return (
    <ul className="flex flex-col divide-y divide-card-border">
      {commands.map((cmd) => (
        <li key={cmd.shortcut} className="flex items-center justify-between py-2">
          <span>{cmd.label}</span>
          <Shortcut value={cmd.shortcut} />
        </li>
      ))}
    </ul>
  );
}

When to use Shortcut

Use when

You need the documented Shortcut interaction or presentation in a product workflow.

Avoid when

A native HTML element already provides the Shortcut behavior you need.

Accessibility

Keep the Shortcut labeled and use its documented keyboard interaction. The component preserves visible focus and communicates state without relying on color alone.

Keep keyboard focus visible and follow the documented key commands.
Provide an accessible name and connect descriptions or errors to the control.