کارت برگردان
flip-cardانیمیشنکارتی که با هاور یا کلیک دور محور عمودی میچرخه و پشتش را نشان میده.
پلن حرفهایبرای دیدن قیمت، ماوس را روی کارت ببرید
۲۹۰٬۰۰۰ تومان / ماههمهی کامپوننتها و قالبها
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add flip-cardنصب دستی
محتوای تب «کد» را در
components/animations/flip-card.tsxبگذارید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { FlipCard } from "@/components/animations/flip-card"23<FlipCard front={<div className="p-4">قیمت پلن</div>} back={<div className="p-4">۲۹۰٬۰۰۰ تومان / ماه</div>} />پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| front / back | ReactNode | - | دو روی کارت. اندازه از روی جلو گرفته میشه. |
| trigger | "hover" | "click" | "hover" | با کلیک، کارت نقش دکمه میگیره و با Enter هم برمیگردد. |