Berry React
v4.0.0
v4.0.0
  • Introduction
  • Package
  • Getting Started
    • Pre-requisites
    • Quick Start
    • Mock backend
    • Deployment
    • Licensing
  • Setup
    • Seed
    • To Existing Project
  • Folder Structure
  • State Management
  • Multi Language
  • Authentication
    • Firebase
    • Auth0
    • AWS Cognito
    • Supabase
  • API Calls
  • Routing
    • New Menu
    • Login as First Page
    • Skip Login
    • Render Menu from the backend
    • Remove menu render via backend
  • Theme
    • Configuration
    • Presets
    • Style
      • Color
      • Typography
      • Overrides
      • Shadows
    • Layouts
    • Logo
  • How to
    • Remove eslint
    • Remove prettier
  • Components
    • Avatar
    • AnimateButton
    • Accordion
    • Breadcrumbs
    • Chip
    • ImageList
    • MainCard
    • Transitions
    • SubCard
  • Dependencies
  • Support
    • Roadmap
    • Changelog
    • FAQ
  • Berry Eco System
Powered by GitBook
On this page
  • Mui core shadows
  • Customized customShadows
  • How to use

Was this helpful?

  1. Theme
  2. Style

Shadows

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

Was this helpful?

Mui core shadows

We used core shadows as provided by MUI. Refer:

Customized customShadows

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

Demo:

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>
   ...
   ...
  </>
 )
}
https://mui.com/system/shadows/
https://berrydashboard.io/utils/util-shadow