Keyboard Shortcut Toolbar

Component 11

About

A compact text-formatting toolbar of icon buttons that reveal tooltips showing each action's keyboard shortcut on hover.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Keyboard Shortcut Toolbar to your project and fits it to your theme.

Code

How Keyboard Shortcut Toolbar is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import {
  AlignCenterIcon,
  AlignJustifyIcon,
  AlignLeftIcon,
  AlignRightIcon,
  BoldIcon,
  ItalicIcon,
  StrikethroughIcon,
  UnderlineIcon,
} from "lucide-react";
import { Button } from "@/components/ui/v-tooltip-7-utils/button";
import { Kbd } from "@/components/ui/v-tooltip-7-utils/kbd";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/v-tooltip-7-utils/tooltip";

const tools = [
  { icon: BoldIcon, label: "Bold", shortcut: ["⌘", "B"], open: true },
  { icon: ItalicIcon, label: "Italic", shortcut: ["⌘", "I"], open: false },
  {
    icon: UnderlineIcon,
    label: "Underline",
    shortcut: ["⌘", "U"],
    open: false,
  },
  {
    icon: StrikethroughIcon,
    label: "Strikethrough",
    shortcut: ["⌘", "⇧", "X"],
    open: false,
  },
] as const;

const aligns = [
  { icon: AlignLeftIcon, label: "Align left", shortcut: ["⌘", "⇧", "L"] },
  { icon: AlignCenterIcon, label: "Align center", shortcut: ["⌘", "⇧", "E"] },
  { icon: AlignRightIcon, label: "Align right", shortcut: ["⌘", "⇧", "R"] },
  { icon: AlignJustifyIcon, label: "Justify", shortcut: ["⌘", "⇧", "J"] },
] as const;

export default function Default() {
  return (
    <div className="flex min-h-52 w-full items-center justify-center p-6">
      <div className="flex items-center justify-center">
        <TooltipProvider>
          <div className="flex items-center gap-1 rounded-lg border bg-background p-1 shadow-sm">
            {tools.map(({ icon: Icon, label, shortcut, open }) => (
              <Tooltip key={label} defaultOpen={open}>
                <TooltipTrigger render={<Button size="icon" variant="ghost" />}>
                  <Icon aria-hidden="true" className="size-4" />
                  <span className="sr-only">{label}</span>
                </TooltipTrigger>
                <TooltipContent className="px-2.5 py-2">
                  <div className="flex items-center gap-3">
                    <span>{label}</span>
                    <span className="flex items-center gap-0.5">
                      {shortcut.map((k) => (
                        <Kbd key={k}>{k}</Kbd>
                      ))}
                    </span>
                  </div>
                </TooltipContent>
              </Tooltip>
            ))}
            <div className="mx-1 h-5 w-px bg-border" />
            {aligns.map(({ icon: Icon, label, shortcut }) => (
              <Tooltip key={label}>
                <TooltipTrigger render={<Button size="icon" variant="ghost" />}>
                  <Icon aria-hidden="true" className="size-4" />
                  <span className="sr-only">{label}</span>
                </TooltipTrigger>
                <TooltipContent className="px-2.5 py-2">
                  <div className="flex items-center gap-3">
                    <span>{label}</span>
                    <span className="flex items-center gap-0.5">
                      {shortcut.map((k) => (
                        <Kbd key={k}>{k}</Kbd>
                      ))}
                    </span>
                  </div>
                </TooltipContent>
              </Tooltip>
            ))}
          </div>
        </TooltipProvider>
      </div>
    </div>
  );
}