Preview Card

Installation

Bash

pnpm dlx shadcn@latest add @spaceui/primitives-preview-card

pnpm dlx shadcn@latest add @spaceui/primitives-preview-card

Code

import { Button } from '@/components/ui/button'
import { PreviewCard, PreviewCardPopup, PreviewCardTrigger } from '@/components/ui/preview-card'

Code

<PreviewCard>
  <PreviewCardTrigger>Open Preview Card</PreviewCardTrigger>
  <PreviewCardPopup>Preview Card Content</PreviewCardPopup>
</PreviewCard>

Root component. Alias for PreviewCard.Root from Base UI.

Trigger element that shows the preview card on hover. Alias for PreviewCard.Trigger from Base UI.

Popup container that displays the preview content. Also exported as HoverCardContent.

Prop	Type	Default	Description
`align`	start\|center\|end	center	Alignment relative to the trigger
`sideOffset`	number	4	Distance from the trigger in pixels
`anchor`	Element\|null\|React.RefObject<Element>	-	Custom anchor element or ref to anchor the popup against
`portalProps`	PreviewCard.Portal.Props	-	Props forwarded to the internal portal (`keepMounted`, `container`, etc.); see Base UI Preview Card portal API

Primitive sub-components for custom positioning, arrows, backdrops, and portal rendering.

PreviewCard, PreviewCardTrigger, and PreviewCardPopup are also exported as HoverCard, HoverCardTrigger, and HoverCardContent.