Skip to content

index.mdx

Latest commit

 

History

History
79 lines (48 loc) · 2.07 KB

index.mdx

File metadata and controls

79 lines (48 loc) · 2.07 KB
title PreviewCard
description A popup that appears when a link is hovered, showing a preview for sighted users.
source packages/raystack/components/preview-card
tag new

import { playground, arrowDemo, positionDemo, contentTransitionsDemo } from "./demo.ts";

Anatomy

Import and assemble the component:

import { PreviewCard } from "@raystack/apsara";

<PreviewCard>
  <PreviewCard.Trigger href="/some-url">Hover me</PreviewCard.Trigger>
  <PreviewCard.Content>
    Preview content here
  </PreviewCard.Content>
</PreviewCard>

API Reference

Root

Groups all parts of the preview card.

Trigger

A link element that opens the preview card on hover. Renders an <a> tag.

Content

Renders the preview card content panel, wrapping Portal, Positioner, and Popup internally.

Viewport

Optional wrapper for animating content transitions when multiple triggers share one card via createHandle. Provides direction-aware slide animations.

Examples

With Arrow

Display an arrow pointing to the trigger element.

Content Transitions

When multiple triggers share one card via createHandle, wrap content in Viewport to animate transitions between them. Content slides in from the direction of the newly hovered trigger.

Positioning

Control the position of the preview card relative to its trigger.

Accessibility

  • Opens on hover with configurable delay (default 600ms)
  • Closes when the pointer leaves the trigger or content area
  • Content is accessible to screen readers when open
  • Trigger renders as a semantic <a> element
  • Respects motion preferences: preview card open/close motion is enabled only when prefers-reduced-motion: no-preference