Primitive · CLI
Preview Card
Hover/focus link preview — soft settle; opt-in tilt / magnetic / spotlight for media.
Preview
npx shadcn@latest add @atroui/preview-cardHover AtroUI for a quiet media preview.
Installation
Agent blurb — install command + no npm UI rule. For agents
npx shadcn@latest add @atroui/preview-cardSource lands in your repo. Installation · Registry
Usage
Default is soft popupMotion only. Pass tilt, magnetic, and/or spotlight on PreviewCardContent for media surfaces — never on Button or Menu chrome.
tsx
import {
PreviewCard,
PreviewCardContent,
PreviewCardDescription,
PreviewCardHeader,
PreviewCardTitle,
PreviewCardTrigger,
} from "@/components/ui/preview-card"
import { IMAGEORY } from "@/lib/imageory"
<PreviewCard>
<PreviewCardTrigger href="https://www.atroui.com">AtroUI</PreviewCardTrigger>
<PreviewCardContent tilt spotlight className="w-80 overflow-hidden p-0">
<img src={IMAGEORY.cosmos} alt="" className="aspect-video w-full object-cover" />
<PreviewCardHeader className="p-3.5">
<PreviewCardTitle>AtroUI</PreviewCardTitle>
<PreviewCardDescription>Media preview with mild tilt.</PreviewCardDescription>
</PreviewCardHeader>
</PreviewCardContent>
</PreviewCard>API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| tilt | boolean | { rotationFactor?, perspective? } | false | Mild 3D tilt (≤6–8°). Media only. |
| magnetic | boolean | { intensity?, range? } | false | Pointer pull (≤0.35 / ≤80px). Media only. |
| spotlight | boolean | { size?, opacity?, color? } | false | Low-opacity cursor wash for dark Mira cards. |
Preview Card