Are the ai2 Shortcut dropdown menus free?

Yes. The whole styled layer is free and MIT licensed, like the component core.

Do they respect reduced motion?

Yes. Under prefers-reduced-motion, the scale is skipped and the panel fades in.

Can I change the size?

Yes. Every variation takes a size prop of sm, md, lg or xl, aligned to the base Button height scale.

Shortcut dropdown menus

Five dropdown menus built around keyboard-shortcut affordances: kbd chips, inline hints, a trailing column, grouped sections and a compact command list. The shortcut text is a visual hint and binds no global listener. Each is self-contained (no radix), sized, token-driven, and closes on outside click, Escape or item select.

Dropdown menuShortcut

Installation

The styled layer is free and installs like any other ai2 component.

Run the following command

npx shadcn@latest add @ai2/dropdown-menu-shortcut

Dependencies, the @ai2/tokens theme and the component file are installed together.

Install dependencies

npm install motion lucide-react

Copy the source

components/ui/dropdown-menu-shortcut.tsx

"use client"

import * as React from "react"
import {
  ChevronDown,
  Clipboard,
  Copy,
  FilePlus,
  FolderOpen,
  Redo2,
  Save,
  Scissors,
  Search,
  Undo2,
} from "lucide-react"
import { AnimatePresence, motion, useReducedMotion } from "motion/react"

import { cn } from "@/lib/utils"

/* Shortcut dropdown family: 5 presentations of keyboard shortcuts. The shared idea
   is that every item carries a shortcut - the variants change HOW the shortcut is
   shown: kbd keys, inline text, a right-aligned trail, grouped sections and a
   tight/compact list. Each export is a complete dropdown: a relative wrapper + a
   trigger + a panel absolutely positioned below the trigger. NO radix or portal. It
   closes on an outside click, on Escape (focus returns to the trigger) and on an
   item selection. The arrow keys move between items. The shortcut text is only a
   visual hint; it does not bind a global listener. Color comes ONLY from tokens,
   via alpha color-mix. */

export type StyledSize = "sm" | "md" | "lg" | "xl"

const panelWidth: Record<StyledSize, string> = {
  sm: "w-52",
  md: "w-60",
  lg: "w-68",
  xl: "w-76",
}

const itemHeight: Record<StyledSize, string> = {
  sm: "min-h-8 py-1.5",
  md: "min-h-9 py-2",
  lg: "min-h-10 py-2.5",
  xl: "min-h-11 py-3",
}

const compactHeight: Record<StyledSize, string> = {
  sm: "min-h-6 py-0.5",
  md: "min-h-7 py-1",
  lg: "min-h-8 py-1.5",
  xl: "min-h-9 py-2",
}

export interface StyledMenuItem {
  label: React.ReactNode
  icon?: React.ReactNode
  description?: React.ReactNode
  /* Gorsel kisayol ipucu, or. "Ctrl+K" veya "Ctrl K". */
  shortcut?: string
  onSelect?: () => void
}

interface StyledMenuProps {
  className?: string
  size?: StyledSize
  label?: React.ReactNode
  items?: StyledMenuItem[]
}

const triggerBtn =
  "inline-flex h-9 shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-lg border border-border bg-secondary px-4 text-sm font-medium text-secondary-foreground outline-none transition-colors hover:bg-[color-mix(in_oklab,var(--color-foreground)_6%,transparent)] focus-visible:ring-[3px] focus-visible:ring-ring/50 [&>svg]:size-4 [&>svg]:shrink-0 [&>i]:text-base [&>i]:leading-none"

const panelBase =
  "origin-top rounded-xl border border-border bg-popover p-1.5 text-sm text-popover-foreground shadow-lg outline-none"

const itemBase =
  "flex w-full cursor-default select-none items-center gap-2.5 rounded-md px-3 text-left text-sm text-popover-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none"

const kbdChip =
  "inline-flex h-5 min-w-5 select-none items-center justify-center rounded border border-border bg-[color-mix(in_oklab,var(--color-foreground)_5%,transparent)] px-1.5 font-mono text-[0.6875rem] font-medium text-muted-foreground"

const menuMotion = {
  initial: { opacity: 0, scale: 0.96, y: -6 },
  animate: { opacity: 1, scale: 1, y: 0 },
  exit: { opacity: 0, scale: 0.96, y: -6 },
  transition: { type: "spring" as const, stiffness: 340, damping: 26 },
}

const fade = { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }

function useMenuState() {
  const [open, setOpen] = React.useState(false)
  const wrapperRef = React.useRef<HTMLDivElement>(null)
  const triggerRef = React.useRef<HTMLButtonElement>(null)

  React.useEffect(() => {
    if (!open) return
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") {
        setOpen(false)
        triggerRef.current?.focus()
      }
    }
    const onPointer = (e: PointerEvent) => {
      const node = wrapperRef.current
      if (node && e.target instanceof Node && !node.contains(e.target)) {
        setOpen(false)
      }
    }
    window.addEventListener("keydown", onKey)
    window.addEventListener("pointerdown", onPointer)
    return () => {
      window.removeEventListener("keydown", onKey)
      window.removeEventListener("pointerdown", onPointer)
    }
  }, [open])

  return { open, setOpen, wrapperRef, triggerRef }
}

function useArrowNav(panelRef: React.RefObject<HTMLDivElement | null>) {
  return React.useCallback(
    (e: React.KeyboardEvent<HTMLDivElement>) => {
      if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return
      const panel = panelRef.current
      if (!panel) return
      const nodes = Array.from(
        panel.querySelectorAll<HTMLButtonElement>(
          '[role="menuitem"],[role="menuitemcheckbox"]'
        )
      )
      if (nodes.length === 0) return
      e.preventDefault()
      const current = nodes.indexOf(document.activeElement as HTMLButtonElement)
      const next =
        e.key === "ArrowDown"
          ? (current + 1) % nodes.length
          : current <= 0
            ? nodes.length - 1
            : current - 1
      nodes[next]?.focus()
    },
    [panelRef]
  )
}

function MenuShell({
  size = "md",
  label = "Options",
  className,
  children,
}: {
  size?: StyledSize
  label?: React.ReactNode
  className?: string
  children: (close: () => void) => React.ReactNode
}) {
  const { open, setOpen, wrapperRef, triggerRef } = useMenuState()
  const panelRef = React.useRef<HTMLDivElement>(null)
  const onArrow = useArrowNav(panelRef)
  const reduce = useReducedMotion()
  const id = React.useId()
  const panelId = `${id}-menu`

  const active = reduce ? fade : menuMotion

  return (
    <div
      ref={wrapperRef}
      data-slot="styled-dropdown-menu"
      className={cn("relative inline-flex", className)}
    >
      <button
        ref={triggerRef}
        type="button"
        data-slot="styled-dropdown-menu-trigger"
        aria-haspopup="menu"
        aria-expanded={open}
        aria-controls={open ? panelId : undefined}
        className={triggerBtn}
        onClick={() => setOpen(!open)}
      >
        {label}
        <ChevronDown
          className={cn("transition-transform duration-200", open && "rotate-180")}
        />
      </button>

      <AnimatePresence>
        {open ? (
          <div className={cn("absolute left-0 top-full z-50 mt-1", panelWidth[size])}>
            <motion.div
              ref={panelRef}
              id={panelId}
              role="menu"
              data-slot="styled-dropdown-menu-content"
              className={panelBase}
              initial={active.initial}
              animate={active.animate}
              exit={active.exit}
              transition={reduce ? { duration: 0.16 } : menuMotion.transition}
              onKeyDown={onArrow}
            >
              {children(() => setOpen(false))}
            </motion.div>
          </div>
        ) : null}
      </AnimatePresence>
    </div>
  )
}

/* Splits a shortcut like "Ctrl+K" into individual keys. */
function keysOf(shortcut: string): string[] {
  return shortcut.split(/[+\s]+/).filter(Boolean)
}

const editItems: StyledMenuItem[] = [
  { label: "Undo", icon: <Undo2 />, shortcut: "Ctrl+Z" },
  { label: "Redo", icon: <Redo2 />, shortcut: "Ctrl+Y" },
  { label: "Cut", icon: <Scissors />, shortcut: "Ctrl+X" },
  { label: "Copy", icon: <Copy />, shortcut: "Ctrl+C" },
  { label: "Paste", icon: <Clipboard />, shortcut: "Ctrl+V" },
]

const fileItems: StyledMenuItem[] = [
  { label: "New file", icon: <FilePlus />, shortcut: "Ctrl+N" },
  { label: "Open", icon: <FolderOpen />, shortcut: "Ctrl+O" },
  { label: "Save", icon: <Save />, shortcut: "Ctrl+S" },
  { label: "Search", icon: <Search />, shortcut: "Ctrl+F" },
]

/* Kbd: kisayol gercek kbd tuslari olarak, sagda hizali cipler halinde. */
export function KbdMenu({ className, size = "md", label = "Edit", items }: StyledMenuProps) {
  const list = items ?? editItems
  return (
    <MenuShell size={size} label={label} className={className}>
      {(close) => (
        <div className="flex flex-col">
          {list.map((item, i) => (
            <button
              key={`${i}`}
              type="button"
              role="menuitem"
              tabIndex={0}
              className={cn(itemBase, itemHeight[size])}
              onClick={() => {
                item.onSelect?.()
                close()
              }}
            >
              {item.icon ? (
                <span className="flex shrink-0 items-center text-muted-foreground">
                  {item.icon}
                </span>
              ) : null}
              <span className="flex-1">{item.label}</span>
              {item.shortcut ? (
                <span className="flex shrink-0 items-center gap-1">
                  {keysOf(item.shortcut).map((key, k) => (
                    <kbd key={`${k}`} className={kbdChip}>
                      {key}
                    </kbd>
                  ))}
                </span>
              ) : null}
            </button>
          ))}
        </div>
      )}
    </MenuShell>
  )
}

/* Inline: the shortcut sits right after the label as muted inline text. */
export function InlineMenu({ className, size = "md", label = "File", items }: StyledMenuProps) {
  const list = items ?? fileItems
  return (
    <MenuShell size={size} label={label} className={className}>
      {(close) => (
        <div className="flex flex-col">
          {list.map((item, i) => (
            <button
              key={`${i}`}
              type="button"
              role="menuitem"
              tabIndex={0}
              className={cn(itemBase, itemHeight[size])}
              onClick={() => {
                item.onSelect?.()
                close()
              }}
            >
              {item.icon ? (
                <span className="flex shrink-0 items-center text-muted-foreground">
                  {item.icon}
                </span>
              ) : null}
              <span className="truncate">{item.label}</span>
              {item.shortcut ? (
                <span className="shrink-0 font-mono text-xs text-muted-foreground">
                  {item.shortcut}
                </span>
              ) : null}
            </button>
          ))}
        </div>
      )}
    </MenuShell>
  )
}

/* Trailing: the shortcut aligns to a single monospace track on the right, giving a fixed-width column feel. */
export function TrailingMenu({ className, size = "md", label = "Actions", items }: StyledMenuProps) {
  const list = items ?? editItems
  return (
    <MenuShell size={size} label={label} className={className}>
      {(close) => (
        <div className="flex flex-col">
          {list.map((item, i) => (
            <button
              key={`${i}`}
              type="button"
              role="menuitem"
              tabIndex={0}
              className={cn(itemBase, itemHeight[size])}
              onClick={() => {
                item.onSelect?.()
                close()
              }}
            >
              {item.icon ? (
                <span className="flex shrink-0 items-center text-muted-foreground">
                  {item.icon}
                </span>
              ) : null}
              <span className="flex-1 truncate">{item.label}</span>
              {item.shortcut ? (
                <span className="w-16 shrink-0 text-right font-mono text-xs tracking-tight text-muted-foreground">
                  {item.shortcut}
                </span>
              ) : null}
            </button>
          ))}
        </div>
      )}
    </MenuShell>
  )
}

interface GroupedMenuProps extends StyledMenuProps {
  groups?: { heading: React.ReactNode; items: StyledMenuItem[] }[]
}

const groupData: { heading: React.ReactNode; items: StyledMenuItem[] }[] = [
  {
    heading: "File",
    items: [
      { label: "New file", icon: <FilePlus />, shortcut: "Ctrl+N" },
      { label: "Save", icon: <Save />, shortcut: "Ctrl+S" },
    ],
  },
  {
    heading: "Edit",
    items: [
      { label: "Copy", icon: <Copy />, shortcut: "Ctrl+C" },
      { label: "Paste", icon: <Clipboard />, shortcut: "Ctrl+V" },
    ],
  },
]

/* Grouped: kisayollu itemlar baslikli bolumlere ayrilir, aralarinda ayirici. */
export function GroupedMenu({ className, size = "md", label = "Commands", groups }: GroupedMenuProps) {
  const data = groups ?? groupData
  return (
    <MenuShell size={size} label={label} className={className}>
      {(close) => (
        <div className="flex flex-col">
          {data.map((group, gi) => (
            <div key={`${gi}`} className="flex flex-col">
              {gi > 0 ? (
                <div
                  role="separator"
                  className="my-1.5 h-px bg-[color-mix(in_oklab,var(--color-border)_100%,transparent)]"
                />
              ) : null}
              <div className="px-3 py-1.5 text-xs font-medium text-muted-foreground">
                {group.heading}
              </div>
              {group.items.map((item, i) => (
                <button
                  key={`${gi}-${i}`}
                  type="button"
                  role="menuitem"
                  tabIndex={0}
                  className={cn(itemBase, itemHeight[size])}
                  onClick={() => {
                    item.onSelect?.()
                    close()
                  }}
                >
                  {item.icon ? (
                    <span className="flex shrink-0 items-center text-muted-foreground">
                      {item.icon}
                    </span>
                  ) : null}
                  <span className="flex-1 truncate">{item.label}</span>
                  {item.shortcut ? (
                    <span className="flex shrink-0 items-center gap-1">
                      {keysOf(item.shortcut).map((key, k) => (
                        <kbd key={`${k}`} className={kbdChip}>
                          {key}
                        </kbd>
                      ))}
                    </span>
                  ) : null}
                </button>
              ))}
            </div>
          ))}
        </div>
      )}
    </MenuShell>
  )
}

const compactItems: StyledMenuItem[] = [
  { label: "New file", shortcut: "Ctrl+N" },
  { label: "Save", shortcut: "Ctrl+S" },
  { label: "Search", shortcut: "Ctrl+F" },
  { label: "Settings", shortcut: "Ctrl+," },
  { label: "Delete", shortcut: "Del" },
]

/* Compact: no icons, tight rows - for a shortcut-heavy command list. */
export function CompactMenu({ className, size = "md", label = "Quick", items }: StyledMenuProps) {
  const list = items ?? compactItems
  return (
    <MenuShell size={size} label={label} className={className}>
      {(close) => (
        <div className="flex flex-col">
          {list.map((item, i) => (
            <button
              key={`${i}`}
              type="button"
              role="menuitem"
              tabIndex={0}
              className={cn(
                itemBase,
                compactHeight[size],
                "gap-2 px-2 text-xs text-muted-foreground"
              )}
              onClick={() => {
                item.onSelect?.()
                close()
              }}
            >
              <span className="flex-1 truncate">{item.label}</span>
              {item.shortcut ? (
                <span className="shrink-0 font-mono text-[0.6875rem]">{item.shortcut}</span>
              ) : null}
            </button>
          ))}
        </div>
      )}
    </MenuShell>
  )
}

Manual installs skip the @ai2/tokens theme, so add the token CSS from the theming guide or the tone colors will be missing.

Variations

5 takes on the same idea. Each is its own export, and every one accepts a size prop (sm, md, lg, xl) aligned to the base Button scale.

Kbd

Each shortcut is rendered as real kbd key chips.

Inline

The shortcut sits inline after the label as muted text.

Trailing

Shortcuts align to one right-hand monospace column.

Grouped

Shortcut items split into labelled sections.

Compact

A dense, icon-free command list.

ai2 Shortcut dropdown menus: 5 styled variations on the token system

The ai2 Shortcut dropdown menus are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around click-triggered menus that show a keyboard shortcut on every item. They are free and MIT licensed, and every color comes from a semantic token, so they theme with the rest of ai2 in light and dark.

Motion runs on framer-motion: framer-motion fades and scales the panel in from the trigger. The styled layer is opt-in, so the dependency only lands if you use it; the base components stay lean. Under reduced motion, the scale is skipped and the panel fades in.

What is in the ai2 Shortcut dropdown menus?

5 exports in one file: Kbd, Inline, Trailing, Grouped and Compact. Each renders a native button and takes a size prop (sm, md, lg, xl) aligned to the base Button. They are separate from the base Button on purpose: the base keeps its clean variant, tone and size axes, while the styled layer carries the effects.

You own the file. Copy the one category file and you have all 5 variations, with no runtime dependency on ai2 itself.

Why use it

On-system by construction: Every color resolves to an ai2 semantic token, so the buttons follow your theme in light and dark with no extra work.
Effect without the sprawl: The decorations live in a dedicated styled file, so the base Button keeps its clean, predictable API.
Accessible and honest: Each renders a real button element, keeps a visible focus ring, and respects prefers-reduced-motion.

Features

Token-driven color: No hardcoded hex or oklch; the look recolors with your theme tokens.
framer-motion: framer-motion fades and scales the panel in from the trigger.
Reduced-motion aware: Under prefers-reduced-motion, the scale is skipped and the panel fades in.
Size aligned to the base: Every variation takes sm, md, lg and xl matching the base Button height scale, so styled and base buttons line up in a row.

Production tips

Use it for emphasis, not everywhere: Styled buttons draw the eye. Reserve them for the one action you want people to take on a screen, and use the base Button for the rest.
Keep labels as verbs: The decoration adds weight, so a clear action label keeps the button scannable.
Pick one variation per surface: The variations share a family; using two different ones in the same view competes for attention.

Works with the rest of ai2

The Shortcut dropdown menus sit alongside the base Button and the rest of the @ai2 registry. They share the same token file, so a styled action next to a base button or a badge stays visually consistent in both modes.