React Native Mantine › Data display
Card
Content card with sections
Import: import { Card } from 'react-native-mantine';
Usage
import { Card, Text } from 'react-native-mantine';
<Card shadow="sm" p="lg" radius="md" withBorder>
<Card.Section withBorder inheritPadding>
<Text style={{ fontWeight: '600' }}>Card Title</Text>
</Card.Section>
<Card.Section padding="md">
<Text>Card content goes here</Text>
</Card.Section>
</Card>Props
| Prop | Type | Default | Description |
|---|---|---|---|
padding | SpacingValue | "md" | Card padding - can be theme spacing key (xs, sm, md, lg, xl) or a number in pixels |
children | React.ReactNode | Card content, can include Card.Section components or any other React nodes | |
shadow | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | Card shadow from theme.shadows (inherited from Paper) | |
radius | number | "xs" | "sm" | "md" | "lg" | "xl" | "sm" | Key of theme.radius or number to set border-radius in pixels (inherited from Paper) |
withBorder | boolean | false | Add border with theme color (inherited from Paper) |
style | ViewStyle | Additional styles to apply to the card container |