CompositionAvailable

Keyboard Shortcut

Accessible, reusable key labels for actions.

Replay Check

Loading example…

Installation

Add the component and its dependencies from the registry running on your computer.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/keyboard-shortcut.json

Usage

Import the component into your project and keep the source code under your control.

tsx

import { KeyboardShortcut } from "@/components/ui/keyboard-shortcut";
export default function Demo() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <KeyboardShortcut keys={["Ctrl", "'"]} /> Replay <KeyboardShortcut keys={["Enter"]} /> Check
    </div>
  );
}

States & interaction

Appearance, behavior and keyboard checks.

The composition inherits its controls’ states. Test empty, content, loading and error cases where the application needs them.
Examples on this page are runnable; the displayed code uses the same components. Business logic belongs to the consumer.
Test the example with Tab and Shift+Tab. Focus must stay visible in both themes.

API Reference

BrutalLab-specific properties. Native attributes are supported as well.

Prop	Type	Default	Description
keys / label	string[] / string	See example	Display keys and optional accessible phrase; consumer registers the shortcut.

Accessibility

Rules that should remain intact when adapting the component to a product.

Controls have accessible names, visible focus and keyboard support.