Preview

Installation

Add the component with the CLI.

npx shadcn@latest add @intentui/preview

Composed components

Manual installation

Install the dependencies, then copy the component source into your project.

npm install react-aria-components

Anatomy

PreviewTrigger wraps a focusable trigger and Preview. Put timing and disabled props on PreviewTrigger, and positioning and appearance props on Preview.

import { PreviewTrigger, Preview } from "@/components/ui/preview"
import { Button } from "@/components/ui/button"
import { Link } from "@/components/ui/link"

<PreviewTrigger>
  <Link href="#">View issue</Link>
  <Preview>
    <p>Issue details</p>
    <Button size="sm">Open issue</Button>
  </Preview>
</PreviewTrigger>

The first child must be a focusable trigger, such as a link or button. The preview remains open while the pointer or keyboard focus moves into Preview, so its buttons, links, and other controls can be used.

Examples

Without delay

By default, a preview opens after 600 milliseconds. Set delay to 0 to show it immediately on hover or keyboard focus.

Custom trigger

Wrap a custom element with React Aria's Focusable component when it is not already a focusable component. This allows PreviewTrigger to attach the required hover, focus, keyboard, and long-press behavior.

Accessibility

PreviewTrigger opens on hover, keyboard focus, or long press on touch devices. When it is open, pressing Tab moves focus into its interactive content, and pressing Escape closes it and restores focus to the trigger.

Use a tooltip for short, non-interactive descriptions. Use a preview when users need richer details or actions without opening a modal dialog.

Component API

PreviewTrigger

Preview