Preview Card

Installation

pnpm dlx shadcn@latest add @uitopia/preview-card

Usage

import { Button } from "@/components/ui/button"
import {
  PreviewCard,
  PreviewCardPopup,
  PreviewCardTrigger,
} from "@/components/ui/preview-card"

<PreviewCard>
  <PreviewCardTrigger>Open Preview Card</PreviewCardTrigger>
  <PreviewCardPopup>Preview Card Content</PreviewCardPopup>
</PreviewCard>

Comparing with Radix / shadcn

If you’re already familiar with Radix UI and shadcn/ui, this guide highlights the small differences and similarities so you can get started with ui/topia quickly.

Quick Checklist

• Update import path from @/components/ui/hover-card → @/components/ui/preview-card
• Prefer PreviewCard* component names; HoverCard* remain for legacy
• Prefer PreviewCardPopup instead of HoverCardContent
• If you used asChild on parts, switch to the render prop

Comparison Example

<HoverCard>
  <HoverCardTrigger asChild>
    <Button variant="outline">Open Preview Card</Button>
  </HoverCardTrigger>
  <HoverCardContent>Preview Card Content</HoverCardContent>
</HoverCard>

<PreviewCard>
  <PreviewCardTrigger render={<Button variant="outline" />}>
    Open Preview Card
  </PreviewCardTrigger>
  <PreviewCardPopup>Preview Card Content</PreviewCardPopup>
</PreviewCard>