Preview Card

A preview card composed of Card, Image, and Tooltip — an image card on its own, or as a rich hover preview on a link

Installation

$npx litefy@latest add preview-card
$pnpm dlx litefy@latest add preview-card
$yarn dlx litefy@latest add preview-card
$bun --bun litefy@latest add preview-card

Usage

Composed from Card, Image, and Tooltip — the CLI install resolves them automatically.

Image Card

The card renders inline — omit trigger and href to embed it in place.

Designing with tokens

An inline card rendered in place — omit trigger and href to embed it in content.

"use client";

import { PreviewCard } from "@/ui";

export default function PreviewCardImageDemo() {
  return (
    <PreviewCard
      src="https://picsum.photos/seed/typography/1200/800"
      alt="Typography specimen"
      title="Designing with tokens"
      description="An inline card rendered in place — omit trigger and href to embed it in content."
      classNames={{ image: "h-44" }}
    />
  );
}

Hover Preview

Wrap a link with trigger and href to show the card as a tooltip on hover.

Litefy Preview Card

"use client";

import { PreviewCard } from "@/ui";

export default function PreviewCardBasicDemo() {
  return (
    <PreviewCard
      trigger="Litefy Preview Card"
      href="#preview-card"
      src="https://picsum.photos/seed/preview-card/1200/800"
      alt="Preview"
      title="Litefy Preview Card"
      description="Hovering the link renders an image card as a rich preview."
    />
  );
}

Image className controls the image area height (default h-40).

API Reference

PreviewCard

Prop	Type	Default	Description
`src`	`string`	-	Image source URL
`alt`	`string`	-	Image alt text
`title`	`React.ReactNode`	-	Card title
`description`	`React.ReactNode`	-	Card description
`trigger`	`React.ReactNode`	-	If provided, renders as a hover tooltip on a link
`href`	`string`	`"#"`	Link href (only used with `trigger`)
`delay`	`number`	`200`	Tooltip show delay (ms, only with `trigger`)
`className`	`ClassNameValue`	-	Custom classes on the card
`classNames`	`{ image? / body? / title? / description? }`	-	Custom classes for sub-parts