Lumi UILumi UI

Preview Card

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

DocsAPI Reference

The principles of good typography remain into the digital age.

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>

Anatomy

<PreviewCard>   
  <PreviewCardTrigger />
  <PreviewCardContent />
</Select>

Cookbook

PreviewCardTrigger renders a by default. Use render props to render other elements.