ะะฝะพะฟะบะธะะพะฒะพะต
ะะฐะณะฝะธัะฝะฐั ะบะฝะพะฟะบะฐ
ะะฝะพะฟะบะฐ ััะฝะตััั ะบ ะบัััะพัั, ะบะพะณะดะฐ ะผััั ััะดะพะผ, ะธ ะผัะณะบะพ ะฒะพะทะฒัะฐัะฐะตััั ะฝะฐ ะผะตััะพ. ะะฐ ัะตะปะตัะพะฝะฐั ัััะตะบั ะฒัะบะปััะฐะตััั ัะฐะผ.
ะะฐัััะพะนะบะธ
color
glowColor
highlightColor
ะัะฝะพะฒะฐะฝะพ ะฝะฐ Magnetic Button (MIT ะปะธัะตะฝะทะธั) ยท ะฃัะปะพะฒะธั ะธัะฟะพะปัะทะพะฒะฐะฝะธั
ะัั ะฒ Pro
ะกะผะพััะตัั ะฒัะตะะฐัะฐะผะตััั
11 ะฟะฐัะฐะผะตััะพะฒ| ะะฐัะฐะผะตัั | ะขะธะฟ | ะะพ ัะผะพะปัะฐะฝะธั | ะะฟะธัะฐะฝะธะต |
|---|---|---|---|
| strength | number | 0.3 | ะะฐัะบะพะปัะบะพ ัะธะปัะฝะพ ะบะฝะพะฟะบะฐ ััะฝะตััั ะบ ะบัััะพัั. |
| radius | number | 150 | ะ ะฐัััะพัะฝะธะต, ั ะบะพัะพัะพะณะพ ะบะฝะพะฟะบะฐ ะฝะฐัะธะฝะฐะตั ะฟัะธััะณะธะฒะฐัััั, ะฒ ะฟะธะบัะตะปัั . |
| variant | 'default' | 'secondary' | 'outline' | 'ghost' | 'link' | 'destructive' | "default" | ะะธะด ะบะฝะพะฟะบะธ. |
| size | 'default' | 'sm' | 'lg' | 'icon' | "default" | ะ ะฐะทะผะตั ะบะฝะพะฟะบะธ. |
| disabled | boolean | false | ะัะบะปััะธัั ะบะฝะพะฟะบั ะธ ัััะตะบั. |
| springConfig | { duration?: number; bounce?: number } | "{ bounce: 0.1, duration: 0.4 }" | ะะฐัััะพะนะบะธ ะฟััะถะธะฝั. |
| asChild | boolean | false | ะัะดะฐัั ััะธะปะธ ะดะพัะตัะฝะตะผั ัะปะตะผะตะฝัั, ะฝะฐะฟัะธะผะตั ัััะปะบะต. |
| children | ReactNode | โ | ะขะตะบัั ะธ ะธะบะพะฝะบะฐ ะบะฝะพะฟะบะธ. |
| color | string | "#ffffff" | ะฆะฒะตั ะทะฐะปะธะฒะบะธ ะบะฝะพะฟะบะธ. ะขะตะบัั ัะฐะผ ััะฐะฝะพะฒะธััั ััะผะฝัะผ ะธะปะธ ะฑะตะปัะผ. |
| glowColor | string | "rgba(255,255,255,0.25)" | ะัะณะบะพะต ัะฒะตัะตะฝะธะต ะฟะพะด ะบะฝะพะฟะบะพะน. |
| highlightColor | string | "rgba(255,255,255,0.6)" | ะขะพะฝะบะธะน ะฑะปะธะบ ะฟะพ ะฒะตัั ะฝะตะผั ะบัะฐั. |
ะะฐะฒะธัะธะผะพััะธ
ะะฐะบะตัะพะฒ: 5
npm install motion @radix-ui/react-slot class-variance-authority clsx tailwind-merge