Preview Card
The popover's glass panel shown on hovering a link, to say where it goes before it is followed.
01Preview
01Every primitive here is built on Base UI, so the behaviour comes from there and only the look is ours. Hover the link to see where it goes before you follow it.
02Installation
npx shadcn@latest add https://aiellie.app/r/preview-card.json03API reference
09From the Base UI documentation
Groups all parts of the preview card. Doesn't render its own HTML element.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultOpen | boolean | false | Whether the preview card is initially open. To render a controlled preview card, use the open prop instead. |
| open | boolean | - | Whether the preview card is currently open. |
| onOpenChange | ((open: boolean, eventDetails: PreviewCard.Root.ChangeEventDetails) => void) | - | Event handler called when the preview card is opened or closed. |
| actionsRef | React.RefObject<PreviewCard.Root.Actions | null> | - | A ref to imperative actions. unmount: Unmounts the preview card popup.close: Closes the preview card imperatively when called. |
| defaultTriggerId | string | null | - | ID of the trigger that the preview card is associated with. This is useful in conjunction with the defaultOpen prop to create an initially open preview card. |
| handle | PreviewCard.Handle<Payload> | - | A handle to associate the preview card with a trigger. If specified, allows external triggers to control the card's open state. Can be created with the PreviewCard.createHandle() method. |
| onOpenChangeComplete | ((open: boolean) => void) | - | Event handler called after any animations complete when the preview card is opened or closed. |
| triggerId | string | null | - | ID of the trigger that the preview card is associated with. This is useful in conjunction with the open prop to create a controlled preview card. There's no need to specify this prop when the preview card is uncontrolled (that is, when the open prop is not set). |
| children | React.ReactNode | PayloadChildRenderFunction<Payload> | - | The content of the preview card. This can be a regular React node or a render function that receives the payload of the active trigger. |