Preview Menu

import {
  CopyIcon,
  HeartIcon,
  ShareNetworkIcon,
  TrashIcon,
} from "@phosphor-icons/react"
import * as React from "react"
import {
  PreviewMenu,
  PreviewMenuContent,
  PreviewMenuItem,
  PreviewMenuSeparator,
  PreviewMenuTrigger,
} from "@/components/interactions/preview-menu"
import { cn } from "@/lib/utils"

const photos = [
  "from-blue-500 to-purple-500",
  "from-orange-500 to-pink-500",
  "from-green-500 to-teal-500",
  "from-indigo-500 to-blue-500",
  "from-yellow-500 to-orange-500",
  "from-pink-500 to-red-500",
  "from-teal-500 to-cyan-500",
  "from-purple-500 to-indigo-500",
  "from-teal-400 to-green-500",
]

function Photo({ tone, label }: { tone: string; label: string }) {
  return (
    <div
      role="img"
      aria-label={label}
      className={cn("aspect-square size-full bg-linear-to-br", tone)}
    />
  )
}

function PhotoGrid({ withDisabled = false }: { withDisabled?: boolean }) {
  const [log, setLog] = React.useState(
    "Touch and hold a photo, or right-click it."
  )

  return (
    <div className="mx-auto flex w-full max-w-md flex-col gap-3">
      <div className="grid grid-cols-3 gap-2">
        {photos.map((tone, index) => {
          const label = `Photo ${index + 1}`
          return (
            <PreviewMenu key={tone}>
              <PreviewMenuTrigger className="aspect-square overflow-hidden rounded-2xl">
                <Photo tone={tone} label={label} />
              </PreviewMenuTrigger>
              <PreviewMenuContent>
                <PreviewMenuItem onClick={() => setLog(`Copied ${label}`)}>
                  Copy
                  <CopyIcon />
                </PreviewMenuItem>
                <PreviewMenuItem onClick={() => setLog(`Shared ${label}`)}>
                  Share
                  <ShareNetworkIcon />
                </PreviewMenuItem>
                <PreviewMenuItem
                  disabled={withDisabled}
                  onClick={() => setLog(`Favorited ${label}`)}
                >
                  Favorite
                  <HeartIcon />
                </PreviewMenuItem>
                <PreviewMenuSeparator />
                <PreviewMenuItem
                  variant="destructive"
                  onClick={() => setLog(`Deleted ${label}`)}
                >
                  Delete
                  <TrashIcon />
                </PreviewMenuItem>
              </PreviewMenuContent>
            </PreviewMenu>
          )
        })}
      </div>
      <p role="status" className="text-sm text-muted-foreground">
        {log}
      </p>
    </div>
  )
}

export default function PreviewMenuDemo() {
  return <PhotoGrid />
}

PreviewMenu builds on the menu primitives of the chosen base. Touching and holding the trigger, or right-clicking it, blurs the page and animates the trigger from its position into a centered preview up to 360px wide, morphing its corner radius along the way. The menu of actions opens below the preview and the trigger stays hidden until the menu finishes closing, so the preview appears to return to its place.

By default, the preview shows the trigger's own content. Pass preview to PreviewMenuContent to show richer content instead; the trigger's snapshot crossfades into it. Use it for items that benefit from a quick look before acting, such as photos, documents, or messages.

Installation

CLI

$ pnpm dlx shadcn@latest add @esuiss/preview-menu

Works in any project with a components.json. See Installation for the one-line registry setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add interactions preview-menu

Manual

1. Install the dependencies and add the cn helper:

$ pnpm add @base-ui/react

2. Copy the source into components/interactions/preview-menu.tsx:

3. Update the import paths to match your project.

Usage

import { PreviewMenu, PreviewMenuTrigger, PreviewMenuContent, PreviewMenuItem, PreviewMenuSeparator } 

<PhotoGrid

• Compose PreviewMenuTrigger and PreviewMenuContent inside PreviewMenu, with PreviewMenuItem and PreviewMenuSeparator inside the content.
• The menu is uncontrolled by default; pass open and onOpenChange to control it.
• Set aspectRatio when a custom preview has a different shape than the trigger; otherwise the preview keeps the trigger's proportions.
• Handle actions with onClick on each item. Items close the menu when chosen.

Examples

Disabled item

A disabled item is announced as unavailable and does not act, while the other items still work.

Custom preview

A compact album row opens a larger custom preview through the preview prop and aspectRatio.

API Reference

Accessibility

• The popup has role="menu" and items have role="menuitem", with keyboard navigation from the menu primitive.
• Escape closes the menu without running an action.
• Disabled items set aria-disabled and cannot be chosen.
• The lifted preview is aria-hidden, so assistive technologies read the trigger and menu only.

Notes

• Parts use data-slot values preview-menu-trigger, preview-menu-backdrop, preview-menu-preview, preview-menu-content, preview-menu-item, and preview-menu-separator. Items set data-variant.
• The trigger carries data-previewing while open and data-lifted until the closing animation ends, and is invisible during that time.
• The trigger disables text selection and the iOS touch callout so long presses open the menu.

Long pressing a PreviewMenuTrigger measures it and the menu, then animates its content from its place on screen into a larger preview, up to 360 points wide. The preview and the menu below it are centered together between the top and bottom safe areas. The rest of the screen fades behind a scrim, and the menu grows out of the trigger into place.

The original trigger is hidden while lifted, so the preview appears to rise out of it. With custom preview content, the trigger's content cross-fades into it as it grows. Pressing outside closes the menu and the preview and menu shrink back into the trigger. Use it for photos, messages or cards that benefit from a closer look before acting.

Installation

$ pnpm dlx shadcn@latest add @esuiss-rn/preview-menu

$ pnpm dlx @esuiss/ui@latest add preview-menu

$ pnpm dlx @esuiss/ui@latest add preview-menu --platform swift