Shadows

Add or remove shadows to elements with box-shadow utilities.

Mui core shadows

We used core shadows as provided by MUI. Refer: https://mui.com/system/shadows/

Customized customShadows

There are few shadows that we customized as per theme's need. check here: src\themes\shadows.tsx.

Demo: https://berrydashboard.com/utils/util-shadow

How to use

1. Import MUI theme

2. Use shadow with an element.

import {useTheme} from '@mui/material/style';

function YourComponent() {
 const theme = useTheme();

 return (
  <>
   ...
   ...
    // normal shadow
    <Box sx={{ boxShadow: theme.customShadows.z1 }}>....</Box>

    // shadows according to palette
    <Box sx={{ boxShadow: theme.customShadows.primary }}>....</Box>
   ...
   ...
  </>
 )
}