ะะพะผะฟะพะฝะตะฝัั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