Preview Card | Surflane

Preview

Local preview. It doesn't affect real accounts, environments, or run data.

Compare the same example at each size and density. Switching keeps input values and selection state. Size guidance and comparisons

Cancel preview opening

Read the deployment policy guide before configuring deployment checks.

Deployment policy guide

Check allowed and blocked environments with temporary tokens. Keep redacted logs for each check.

The destination repeats this summary. No action or essential information exists only in the preview.

Usage

Preview a summary of a link's destination on hover or keyboard focus. Keep the information users need in the body text and at the destination. The link still navigates to its original href.

Don't put buttons, forms, or exclusive information in the Popup. It isn't a separate navigation path for touch, keyboard, or screen reader users, so don't give it Dialog or Tooltip roles. Use Popover when the content needs interaction.

Size: SizeProvider size="small" resizes the whole composition, including portals. The default size is Default. Size guidance and comparisons

Anatomy

Root<Payload> → Trigger(anchor) + Portal → Content(Positioner + Popup); optional Viewport / Arrow

Keyboard and accessibility

The link keeps its Tab and Enter navigation. When the Popup opens after its delay, focus doesn't move into it or get trapped. Escape closes it, as does moving focus or the pointer away. Make all preview information available at the destination too.

Give each control a name that describes its purpose. Connect error messages to their controls, and signal state with more than color. Automated checks don't replace manual keyboard and assistive technology testing.

Example code

Shared components take their styles from design tokens. Each example sets its own composition and accessibility attributes. The calling screen defines callbacks, refs, and product data.

import { PreviewCard } from '@surflane/ui'

<PreviewCard.Root>
  <PreviewCard.Trigger href='/guides/deployment-policy'>
    Deployment policy guide
  </PreviewCard.Trigger>
  <PreviewCard.Portal>
    <PreviewCard.Content sideOffset={8}>
      <strong>Deployment policy guide</strong>
      <p>Check allowed and blocked environments with temporary tokens.</p>
    </PreviewCard.Content>
  </PreviewCard.Portal>
</PreviewCard.Root>

Key API

Preview Card — common wrapper props
Prop	Contract	Default
`Root.open / defaultOpen / onOpenChange`	controlled / uncontrolled open state; cancel()	false
`Trigger.href / target / rel`	native anchor navigation	—
`Trigger.delay / closeDelay`	open / close delay in milliseconds	600 / 300
`createHandle<Payload> / Trigger.payload`	typed detached or multiple triggers	—
`Content.side / align / sideOffset / collisionPadding`	placement around the trigger	sideOffset=8; collisionPadding=12
`Content / Popup`	forwarded div ref and state-dependent className	requires Portal

The table lists the common wrapper's main props. See the package type declarations for the full types.