پشتهی کارت
card-stackانیمیشنکارتهایی روی هم که هر چند ثانیه کارت جلویی به ته صف میره، مناسب نظرات مشتری.
«مهاجرت یک بعدازظهر طول کشید و تقویم شمسی از روز اول درست بود.»
م
مریم احمدی
مدیر محصول
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add card-stackنصب دستی
محتوای تب «کد» را در
components/animations/card-stack.tsxبگذارید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { CardStack } from "@/components/animations/card-stack"23<CardStack className="h-44" items={reviews.map((r) => <Review key={r.id} {...r} />)} />پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| items | ReactNode[] | - | کارتها به ترتیب اولیه. |
| interval | number | 3200 | میلیثانیه بین جابهجاییها. |
| offset / scale | number | 12 / 0.05 | جابهجایی و کوچکشدن هر لایه. |