Chakra UI + Framer Motion

If you'd like to add some interesting motion interaction or animation to your Chakra UI websites or apps, here's a quick tip:

import { Box } from "@chakra-ui/react"
import { motion } from "framer-motion"
// 1. Create a custom motion component from Box
const MotionBox = motion.custom(Box)
// 2. You'll get access to `motion` and `chakra` props in `MotionBox`
function Example() {
  return (
    <MotionBox
      boxSize="40px"
      bg="red.300"
      drag="x"
      dragConstraints={{ left: -100, right: 100 }}
      whileHover={{ scale: 1.1 }}
      whileTap={{ scale: 0.9 }}
    />
  )
}

Edit this page