ืืคืชืืจืืืืืฉ
ืืคืชืืจ ืืื ืื
ืืืคืชืืจ ื ืืฉื ืืกืื ืืฉืืขืืืจ ืงืจืื ืืืืืจ ืืขืืื ืืช ืืืงืื. ืืืกืื ืืืข ืืืคืงื ื ืืื ืืขืฆืื.
ืืชืืื
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