Omarchy Keycap

ui

Keyboard key and shortcut primitives for Omarchy's keyboard-first interfaces.

bunx --bun shadcn@latest add yamz8/omarchy-shadcn-registry/omarchy-keycap

Preview

Dependencies

npm
cn

Source

registry/ui/omarchy-keycap.tsx
import * as React from "react"
import { cn } from "cn"

function OmarchyKeycap({ className, ...props }: React.ComponentProps<"kbd">) {
  return (
    <kbd
      data-slot="omarchy-keycap"
      className={cn(
        "inline-flex min-w-6 items-center justify-center rounded-md border border-border bg-muted px-1.5 py-0.5 font-mono text-[0.6875rem] font-medium text-muted-foreground shadow-[inset_0_-1px_0_var(--border)]",
        className
      )}
      {...props}
    />
  )
}

function OmarchyShortcut({
  keys,
  label,
  className,
  ...props
}: React.ComponentProps<"span"> & {
  keys: readonly string[]
  label?: string
}) {
  return (
    <span
      data-slot="omarchy-shortcut"
      className={cn("inline-flex items-center gap-1.5", className)}
      aria-label={label ?? keys.join(" plus ")}
      {...props}
    >
      {keys.map((key) => (
        <OmarchyKeycap key={key} aria-hidden>
          {key}
        </OmarchyKeycap>
      ))}
    </span>
  )
}

export { OmarchyKeycap, OmarchyShortcut }