npm : 
npm i @fancyapps/ui 
import : 
import Grid from '@mui/material/Grid2';
import Image from 'next/image';
import Fancybox from '@/components/ui/Fancybox';
import : utils
import {imageLoader} from "@/utils/imageLoader";
component :  https://fancyapps.com/

component : default
<Fancybox
      options={{
            Carousel: {
                  infinite: false,
            },
      }}
>
      <Grid container className="grid" spacing={2}>
            <Grid size={{ xs: 12, sm: 6, md: 4, lg: 4, xl: 3 }}>
                  <a href="/img/static/logo.png" className="thumb" data-fancybox="gallery" title="logo">
                        <Box component="figure" className="ratio ratio-1x1 img-contain" sx={{border:'1px solid var(--color-border)'}}>
                             <Image
                                   loader={imageLoader}
                                   src="/img/static/logo.png"
                                    alt="logo"
                                    width={200}
                                    height={150}
                             />
                        </Box>
                  </a>
            </Grid>
      </Grid>
</Fancybox>