Componentnavigation0.65 KB gzipZero dependencies

Keyboard Shortcuts

Action rows with keycaps.

Preview

Live Preview

Keyboard map

Search stubsCtrlK
Print passCtrlP
Close panelEsc

Installation

Tokens guide →

Add to your project via CLI (zero dependencies, code you own):

npx bigbullui add keyboard-shortcuts

Or install the full npm package:

npm install bigbullui

Usage

Open in StackBlitz

import { KeyboardShortcuts } from "@/components/ui/keyboard-shortcuts";

<KeyboardShortcuts />

Usage guidance

Use Keyboard Shortcuts when a ticket stub surface needs Action rows with keycaps. Keep props minimal and prefer composition with sibling stubs.

Avoid Keyboard Shortcuts for long form flows or dense data grids where a dedicated layout block fits better.

Source code

keyboard-shortcuts.tsx

Zero dependencies (only React + utils). Copy and paste directly into your project:

"use client";

import * as React from "react";
import { cn } from "./lib/utils";

export interface ShortcutRow {
  action: string;
  keys: string[];
}

export interface KeyboardShortcutsProps extends React.HTMLAttributes<HTMLDivElement> {
  shortcuts?: ShortcutRow[];
}

/** Keyboard shortcuts: action rows with keycap chips. */
export function KeyboardShortcuts({
  shortcuts = [
    { action: "Search stubs", keys: ["Ctrl", "K"] },
    { action: "Print pass", keys: ["Ctrl", "P"] },
    { action: "Close panel", keys: ["Esc"] },
  ],
  className,
  ...props
}: KeyboardShortcutsProps) {
  return (
    <div className={cn("w-full max-w-sm rounded-lg border-2 border-foreground bg-card p-4", className)} {...props}>
      <p className="font-mono text-[10px] uppercase tracking-widest text-muted-foreground">Keyboard map</p>
      <ul className="mt-2 space-y-1.5">
        {shortcuts.map((s) => (
          <li key={s.action} className="flex items-center justify-between gap-2 rounded-md border border-dashed border-border px-2.5 py-1.5">
            <span className="text-xs font-bold">{s.action}</span>
            <span className="flex gap-1">
              {s.keys.map((k) => (
                <kbd key={k} className="rounded border-b-2 border-border bg-secondary px-1.5 py-0.5 font-mono text-[10px] font-bold">
                  {k}
                </kbd>
              ))}
            </span>
          </li>
        ))}
      </ul>
    </div>
  );
}