Installation#
npmpnpmyarnbun
Examples#
Default#
Default
Link Preview#
Link Preview
User Profile Preview#
User Profile
With Arrow#
With Arrow
Product Preview#
Product Preview
Controlled#
Controlled
Anatomy#
Usage#
Import
import { PreviewCard } from "@sugarcoat/ui-nxt";Usage
<PreviewCard>
<PreviewCard.Trigger>
<a href="/profile">@username</a>
</PreviewCard.Trigger>
<PreviewCard.Portal>
<PreviewCard.Positioner>
<PreviewCard.Popup>
{/* Preview content */}
</PreviewCard.Popup>
</PreviewCard.Positioner>
</PreviewCard.Portal>
</PreviewCard>Props#
PreviewCard (Root)#
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | - | Controlled open state |
| defaultOpen | boolean | false | Default open state (uncontrolled) |
| onOpenChange | (open: boolean) => void | - | Callback when open state changes |
| delay | number | 600 | Delay in ms before showing the preview |
| closeDelay | number | 300 | Delay in ms before hiding the preview |
| size | "sm" | "md" | "lg" | "md" | Size variant |
| css | SystemStyleObject | - | Additional CSS styles using Panda CSS syntax |
PreviewCard.Positioner#
| Prop | Type | Default | Description |
|---|---|---|---|
| side | "top" | "bottom" | "left" | "right" | "bottom" | Preferred side for positioning |
| sideOffset | number | 8 | Distance from the trigger |
| align | "start" | "center" | "end" | "center" | Alignment relative to the trigger |
Accessibility#
- Built on Base UI PreviewCard for robust accessibility
- Shows on hover with configurable delay
- Remains visible when hovering over the popup
- Keyboard accessible via focus
- Properly manages focus for screen readers
- Escape key closes the preview