Home

Preview card

A card that opens when the pointer rests on a link, previewing what the link leads to.

ui.preview-cardcomponents/ui/preview-card.tsx

Use case

For the AI

Use it on names and references inside text and tables: resting on the person a project is assigned to shows their role and workload, on a client's name in an invoice list their contact and balance, on an order number its total and status. The link still opens the full record when pressed, so the card saves a trip and is never the only way in.

Use it when

  • A person, a client or a record number appears inline in text or a table
  • A glance at a few facts would save opening the record
  • The trigger is a link to the record's own page

Use something else when

  • The content is needed to act, or must work on a touch screen: Popover
  • A one-line name for a control: Tooltip
  • The full record, read or edited beside the page: Sheet

Examples

Assigned to Nadia Okonkwo until the handoff.

Code

Import

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

Usage

<p className="text-[14px] text-ink-3">
  Assigned to{" "}
  <PreviewCard>
    <PreviewCardTrigger href="/team/nadia" className="font-medium text-foreground underline underline-offset-4">
      Nadia Okonkwo
    </PreviewCardTrigger>
    <PreviewCardPopup className="w-72">
      <div className="flex gap-3">
        <Avatar className="size-10">
          <AvatarFallback seed="nadia@ateliernord.ca" />
        </Avatar>
        <div className="grid gap-0.5">
          <span className="text-[14px] font-medium text-foreground">Nadia Okonkwo</span>
          <span className="text-[12.5px] text-ink-4">Design lead, Montréal</span>
          <span className="mt-1.5 text-[12.5px] text-ink-3">3 projects in review, back on Monday.</span>
        </div>
      </div>
    </PreviewCardPopup>
  </PreviewCard>{" "}
  until the handoff.
</p>

Rules

  • The trigger is a link with a real `href`: touch screens never hover, so pressing it must reach the record.
  • A few facts only (a face, a name, a role, one line of status), about `w-72`; no form and no buttons in it.
  • A person without a photo is their gradient (`AvatarFallback seed=`), never two letters in a grey circle.
  • The trigger reads as a link (underlined) so people know there is something behind it.