רכיביםProחדש
מחירון עם מתג חיוב
כרטיסי תוכניות עם מתג חודשי או שנתי. כמוסה לבנה גולשת בין האפשרויות והמחירים מתגלגלים מחדש על קפיץ.
התאמה
accentColor
secondaryColor
glowColor
מבוסס על Pricing (MIT רישיון) · תנאי שימוש
מאפיינים
15 מאפיינים| מאפיין | סוג | ברירת מחדל | תיאור |
|---|---|---|---|
| plans | { name; description; monthlyPrice; annualPrice; features: string[]; href?; featured? }[] | — | תוכניות: שם, תיאור, שני מחירים, יכולות, קישור וסימון פופולרי. |
| defaultCycle | 'monthly' | 'annual' | "monthly" | איזו תקופת חיוב נבחרת בהתחלה. |
| currency | string | "$" | סימן המטבע. |
| monthlyLabel | string | "Monthly" | כיתוב מתג החיוב החודשי. |
| annualLabel | string | "Annual" | כיתוב מתג החיוב השנתי. |
| monthlySuffix | string | "/month" | טקסט אחרי המחיר החודשי. |
| annualSuffix | string | "/year" | טקסט אחרי המחיר השנתי. |
| annualNote | string | "" | תווית קטנה ליד המתג, למשל "חסכו 20%". מוסתרת כשהיא ריקה. |
| ctaLabel | string | "Get started" | טקסט הכפתור בכרטיס. |
| featuredLabel | string | "Popular" | תווית על התוכנית המודגשת. |
| priceStiffness | number | 100 | קשיחות הקפיץ שבו המחיר החדש נוחת. |
| accentColor | string | "#ffffff" | הצבע הראשי: המתג, סימני הווי, והתג, המסגרת והכפתור של התוכנית המודגשת. הטקסט על המילוי נהיה כהה או לבן כדי להישאר קריא. |
| secondaryColor | string | "#a3a3a3" | הצבע השני: הפינה הרחוקה של ההדגשה בתוכנית המודגשת. |
| glowColor | string | "rgba(255, 255, 255, 0.1)" | זוהר רך סביב התוכנית המודגשת. |
| className | string | — | מחלקות נוספות. |
תלויות
4 חבילות נדרשות
npm install motion lucide-react clsx tailwind-merge