کارت شناور
hover-cardکامپوننتکارتی که با نگهداشتن ماوس یا فوکوس باز میشه، مناسب پیشنمایش پروفایل.
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add hover-cardنصب دستی
محتوای تب «کد» را در
components/ui/hover-card.tsxبگذارید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { HoverCard } from "@/components/ui/hover-card"23<HoverCard trigger={<a href="#" className="underline">@negar</a>}>4 <ProfilePreview />5</HoverCard>پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| openDelay / closeDelay | number | 300 / 150 | تأخیر باز و بسته شدن (میلیثانیه). |