حاشیهی نورانی
border-beamانیمیشنپرتو نوری که دور کارت میچرخه.
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add border-beamنصب دستی
محتوای تب «کد» را در
components/animations/border-beam.tsxبگذارید. کلیدفریم را هم بهglobals.cssاضافه کنید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { BorderBeam } from "@/components/animations/border-beam"23<BorderBeam><div className="p-4">پلن حرفهای</div></BorderBeam>پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| duration | number | 4 | ثانیه برای یک دور. |
| color | string | var(--foreground) | رنگ پرتو. |