Preview Card

InstallationCopy Anchor Link

pnpm dlx shadcn@latest add @columbus/preview-card

UsageCopy Anchor Link

import {
  PreviewCard,
  PreviewCardPopup,
  PreviewCardTrigger,
} from "@/components/ui/preview-card";

<PreviewCard>
  <PreviewCardTrigger href="/docs">Docs</PreviewCardTrigger>
  <PreviewCardPopup>A short preview of the page.</PreviewCardPopup>
</PreviewCard>;

PreviewCardTrigger renders a link, so give it an href. The card shows when the link is hovered or focused.

AccessibilityCopy Anchor Link

The card is a visual extra for mouse and keyboard users. Screen readers and touch screens only get the link. Don't put anything in the card that isn't also on the linked page, and don't put buttons or links inside it.

Profile cardCopy Anchor Link

Use delay on the trigger to change how long it waits before opening, and align on the popup to line it up with the link.

API referenceCopy Anchor Link

Built on Base UI Preview Card. Every part accepts the props of its Base UI counterpart. Also exported as HoverCard, HoverCardTrigger, and HoverCardContent.

PreviewCardPopupCopy Anchor Link