Preview Card

A popup that appears when a link is hovered, showing a preview for sighted users.

Installation

pnpm dlx shadcn@latest add @lumi-ui/preview-card

Basic Usage

import {
  PreviewCard,
  PreviewCardTrigger,
  PreviewCardContent,
} from "@/components/ui/preview-card"
<PreviewCard>
  <PreviewCardTrigger>Hover</PreviewCardTrigger>
  <PreviewCardContent>
    The React Framework – created and maintained by @vercel.
  </PreviewCardContent>
</PreviewCard>