Components
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
Image Card
Litefy Preview Card
An image card composed of the Card component, an image on top and text below.
"use client";
import { PreviewCard } from "@/ui";
export default function PreviewCardImageDemo() {
return (
<PreviewCard
src="https://picsum.photos/seed/preview-card/1200/800"
alt="Preview"
title="Litefy Preview Card"
description="An image card composed of the Card component, an image on top and text below."
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
Litefy Preview Card
Hovering the link renders an image card as a rich preview.
"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."
/>
);
}
Notes
- PreviewCard is composed internally from Card, Image, and Tooltip — installing via CLI resolves them automatically.
- Card's
overflow-hidden rounded-lgclips the top image to rounded corners automatically. - When
triggeris provided, the card is rendered as aTooltipcontent (widthw-72); withouttrigger, it renders as a standalone card (max-w-sm). - Image
classNamecontrols the image area height (defaulth-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 |
Popover
A button-triggered popover panel built on popover + CSS Anchor Positioning — the base for dropdown-menu compositions
Query Builder
A tree list of field rows with always-visible operator/value rules, nested and/or groups, a live natural-language preview and Submit/Reset — zero external dependencies.