Shadows
This guide explains how to use and customize shadow settings in your KimiStores application.
Shadow Configuration Files
- •
Custom
shadowsinsidesrc/theme/core/shadows.ts- Standard Material UI shadows - •
Custom
customShadowsinsidesrc/theme/core/customShadows.ts- Extended shadow options
Shadow Examples
Standard Shadows (1-24)
Material UI provides 24 standard shadow elevations. Use the elevation prop on components that support it.
// Using elevation prop
<Card elevation={1}>Low elevation</Card>
<Card elevation={8}>Medium elevation</Card>
<Card elevation={16}>High elevation</Card>
<Card elevation={24}>Highest elevation</Card>
// Using sx prop with theme shadows
<Box sx={{ boxShadow: 1 }}>Shadow level 1</Box>
<Box sx={{ boxShadow: 8 }}>Shadow level 8</Box>
Custom Shadows
KimiStores extends the standard shadows with custom options for different use cases.
// Using customShadows from theme
<Box sx={{ boxShadow: (theme) => theme.customShadows.primary }}>
Primary shadow
</Box>
<Box sx={{ boxShadow: (theme) => theme.customShadows.secondary }}>
Secondary shadow
</Box>
<Box sx={{ boxShadow: (theme) => theme.customShadows.card }}>
Card shadow
</Box>
<Box sx={{ boxShadow: (theme) => theme.customShadows.dropdown }}>
Dropdown shadow
</Box>
Customizing Shadows
You can customize the shadow definitions in your theme by modifying the following files:
1. Edit src/theme/core/shadows.ts to change the standard shadow values.
2. Edit src/theme/core/customShadows.ts to adjust colored and special-purpose shadows.
3. Use the theme palette colors to generate shadows that match your brand.