Preview

Installation

Install the component via the CLI in one command.

npx shadcn@latest add @intentui/preview

Composed components

Manual installation

Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.

npm install react-aria-components

Anatomy

import { Preview, PreviewContent } from "@/components/ui/preview"

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

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 PreviewContent, 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 Preview to attach the required hover, focus, keyboard, and long-press behavior.

Accessibility

Preview 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

Preview

PreviewContent