Overlays & feedback
Hover preview card
Hover a task, project or person reference and a rich card peeks its details in place — status, assignee, progress, due date — without navigating away. The “don’t make me click to remember what ORB-241 is” affordance. Cards differ by type, follow the reference’s anchor, and stay open while you reach for them.
npx shadcn@latest add @orbit/hover-previewOverview
Live — hover the underlined onboarding flow v2 or Maya Rivera to peek a task vs. a person card. Move onto the card and it stays.
Picking up where we left off — the onboarding flow v2 is the last blocker before launch. It depends on API rate limiting shipping first, and Maya Rivera owns both. Once the design system audit lands we can close out the milestone.
Capabilities
References everywhere — comments, docs, the feed — become self-explaining without sending you to another page.
Typed cards
Pass data with type: 'task' or type: 'person' and the matching layout renders — no card markup to write.
Behavior
Placement flips to stay on screen; timing keeps the card intentional.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| data | HoverPreviewTask | HoverPreviewPerson | — | Typed content. type: 'task' renders status pill, description, progress, assignee, due, priority, subtasks; type: 'person' renders avatar, role line, open/completed stats, project chips. All detail fields are optional. |
| renderPreview | (data?) => ReactNode | — | Escape hatch — render a fully custom card body instead of the typed layouts. |
| openDelay | number | 120 | Wait before opening on hover, in ms. |
| closeDelay | number | 140 | Grace period before closing — lets the pointer cross into the card. |
| side | "top" | "bottom" | "bottom" | Anchor side. Flips automatically to avoid collisions. |
| align | "start" | "center" | "end" | "start" | Alignment along the reference. |
| sideOffset | number | 8 | Distance from the reference in px. |
| open / defaultOpen | boolean | — | Controlled / uncontrolled open state. |
| onOpenChange | (open: boolean) => void | — | Called when the card opens or closes. |
| render | ReactElement | — | Replace the default link trigger with any element; handlers and ARIA merge onto it. |
| contentClassName | string | — | Extra classes on the 300px card — e.g. to override its width. |
| …rest | AnchorHTMLAttributes | — | Forwarded to the trigger <a> (href, onClick, …), including ref. |
Usage
A hover preview is a read-only peek. It supplements a clickable link — it never replaces one, and never traps the pointer.
Keep the link clickable
The preview is extra. The underlined text must still navigate on click — hover-only access strands keyboard and touch users.
Put actions in the peek
A preview is for reading. Buttons that mutate data belong on the full record, not in a card that vanishes on mouse-out.
Bridge the gap
Allow the pointer to travel from the link onto the card without it closing — otherwise the card is impossible to interact with.
Rely on hover alone
Touch has no hover. Pair the preview with tap-to-open detail so the same context is reachable without a mouse.
Keyboard & accessibility
Built on Base UI PreviewCard: the trigger is a real link that keyboard focus can open, Escape dismisses the card, and nothing in the preview exists only on hover — the destination page always has it too.