@harmeet9013/transitions/src/fade.js

Transitions like MUI without MUI

import { motion } from "framer-motion";

export const Fade = ({
    show = true,
    duration = 0.4,
    className = "",
    children,
}) => {
    return (
        <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: show ? 1 : 0 }}
            transition={{ duration: duration || 0.4 }}
            className={className || ""}
        >
            {children}
        </motion.div>
    );
};