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.
API#WIP
| Prop | Type | Default | Description |
|---|---|---|---|
...props | Base UI PreviewCard.Root.Props | — | Owns open state, hover/focus intent, and trigger-card association via triggerId/handle. |
| 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. |
| 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. |
| 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. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | div props | — | Static card shell for docs previews and non-portaled comparison panes. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | Base UI PreviewCard.Arrow.Props | — | Optional pointer triangle. Brutal hides it to match the source card, which never rendered one. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | div props | — | Leading row for an avatar or icon plus a title stack. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | div props | — | Optional horizontal divider between the header and description. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | p props | — | Primary heading, typically the previewed entity's name. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | p props | — | Supporting copy or status line for the previewed entity. |