Modifier Cluster

macOS modifier symbols laid out side by side with their names printed below.

Modifier keys

⌘Command

⌥Option

⇧Shift

⌃Control

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use

import { Keyboard8 } from "@/components/beste/piece/keyboard8";

<Keyboard8
  heading="Modifier keys"
  modifiers={[
    {
      "symbol": "⌘",
      "name": "Command"
    },
    {
      "symbol": "⌥",
      "name": "Option"
    },
    {
      "symbol": "⇧",
      "name": "Shift"
    },
    {
      "symbol": "⌃",
      "name": "Control"
    }
  ]}
/>