React Native Mantine › Theming

Shadow System

Shadow sizes aligned with Mantine web (xs, sm, md, lg, xl)

Import: import { Shadow System } from 'react-native-mantine';

Usage

import { Paper, Text } from 'react-native-mantine';

// Apply shadow sizes: xs, sm, md, lg, xl
<Paper p="md" shadow="md" radius="md">
  <Text>Content with medium shadow</Text>
</Paper>

// Shadows work great with colors
<Paper
  p="lg"
  shadow="lg"
  radius="md"
  style={{ backgroundColor: '#fff' }}
>
  <Text>Elevated card with large shadow</Text>
</Paper>

Source on GitHub · npm