Preview Card
A hover/focus-triggered floating card for glanceable link, user, and message previews.
Opens by default so the anatomy is inspectable without hovering, but stays fully interactive: move away and it closes on hover/focus intent like any other trigger.
import {
PreviewCard,
PreviewCardContent,
PreviewCardDescription,
PreviewCardHeader,
PreviewCardTitle,
PreviewCardTrigger,
} from "raft-ui";
<PreviewCard>
<PreviewCardTrigger />
<PreviewCardContent>
<PreviewCardHeader>
<PreviewCardTitle />
</PreviewCardHeader>
<PreviewCardDescription />
</PreviewCardContent>
</PreviewCard>Hover or focus the @Atlas link below. delay / closeDelay default to 80ms / 40ms so repeated message previews stay responsive.
Follow up with @Atlas about the token migration.
...propsBase UI PreviewCard.Root.Props
Owns open state, hover/focus intent, and trigger-card association via triggerId/handle.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | Base UI PreviewCard.Root.Props | — | Owns open state, hover/focus intent, and trigger-card association via triggerId/handle. |
containerHTMLElement | RefObject | null
Custom portal container for framed previews or contained overlays.
...propsBase UI PreviewCard.Portal.Props
Portals the preview card to the body or a custom container.
| Prop | Type | Default | Description |
|---|---|---|---|
container | HTMLElement | RefObject | null | — | Custom portal container for framed previews or contained overlays. |
...props | Base UI PreviewCard.Portal.Props | — | Portals the preview card to the body or a custom container. |
...propsBase UI PreviewCard.Trigger.Props
Trigger affordance and positioning anchor. Renders an <a> by default; use render to compose the actual link element and keep styling on the semantic element.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | Base UI PreviewCard.Trigger.Props | — | Trigger affordance and positioning anchor. Renders an <a> by default; use render to compose the actual link element and keep styling on the semantic element. |
...propsBase UI Popup + Positioner props
Portaled floating card. Defaults to side=bottom, align=start, sideOffset=6, disableAnchorTracking=true, and forwards anchor/collision/sticky positioning props.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | Base UI Popup + Positioner props | — | Portaled floating card. Defaults to side=bottom, align=start, sideOffset=6, disableAnchorTracking=true, and forwards anchor/collision/sticky positioning props. |
...propsdiv props
Static card shell for docs previews and non-portaled comparison panes.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | div props | — | Static card shell for docs previews and non-portaled comparison panes. |
...propsBase UI PreviewCard.Arrow.Props
Optional pointer triangle.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | Base UI PreviewCard.Arrow.Props | — | Optional pointer triangle. |
...propsdiv props
Leading row for an avatar or icon plus a title stack.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | div props | — | Leading row for an avatar or icon plus a title stack. |
...propsdiv props
Optional horizontal divider between the header and description.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | div props | — | Optional horizontal divider between the header and description. |
...propsp props
Primary heading, typically the previewed entity's name.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | p props | — | Primary heading, typically the previewed entity's name. |
...propsp props
Supporting copy or status line for the previewed entity.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | p props | — | Supporting copy or status line for the previewed entity. |