Shadcn framer motion

[nimeshmaharjan1]

How do i integrate the button with framer motion because is no div has anyone tried this?

[midoriyaShonen441]

since, Shadcn was base on RadixUI maybe this solution, solve the problem.

https://codesandbox.io/s/radix-ui-framer-motion-p64hw

[McKayMower]

There's two ways i found out how to do it:

1. Wrap the component in a motion.div:

import {motion} from "framer-motion"
import {Button} from "@/components/ui/button" // or wherever your button is

<motion.div animate={{...}}>
  <Button>Your Button</Button>
</motion.div>

2. Make the button a motion component:

import {motion} from "framer-motion"
import {Button} from "@/components/ui/button" // or wherever your button is

const MotionButton = motion(Button);

<MotionButton animate={{...}}>
  // your content here
</MotionButton>

[amjido-01]

please can you explain it more.

[McKayMower]

my apologies, i didn't write the code in a code block. check the updated comment and see if that makes sense

[amjido-01]

OK, thank you so much.
Wrapping the button inside a motion.div works fine. ❤️

[Kinfe123]

can we config the native comp i,e the primitive's one - with out wrapping ot something like but still keeping it on server :)

[monsterswithink]

How do i integrate the button with framer motion because is no div has anyone tried this?

use Component not div

[bcmendis]

Wrapping the Button component with motion works, but creates unexpected behaviour when the asChild prop is enabled.

The animations don't trigger in a stable way, for me at least.

Anyone else facing the same issue? Any fixes?

[begalinsaf]

try to using lazy motion

[dijalmass]

function Button({
  className,
  variant,
  size,
  asChild = false,
  ...props
}: React.ComponentProps<'button'> &
  VariantProps<typeof buttonVariants> & {
    asChild?: boolean
  }) {
  const Comp = asChild ? Slot : 'button'

  const Bt = React.forwardRef((_, ref) => {
    return <Comp
      //@ts-ignore
      ref={ref}
      data-slot="button"
      className={cn(buttonVariants({ variant, size, className }))}
      {...props}
    />
  })
  
  const BtMotion = motion.create(Bt)

  return <BtMotion  whileTap={{ scale: 0.8 }}/>
}

I resolved with this wrapper in the ui/components/button.tsx to avoid create a WrappedButton losting the props.