Card
Live preview
Profile and summary cards with balanced padding and soft elevation.
Alex Morgan
Product designer · San Francisco. Usually replies within a few hours.
Weekly summary
12 tasks completed · 3 meetings · Focus time up 18% from last week.
Cards are surface containers with consistent padding, radius, and optional press feedback.
import { Card } from '@truongdq01/ui';import { Text, View } from 'react-native';
<Card> <Text style={{ fontWeight: '600' }}>Team updates</Text> <Text>All systems operational.</Text></Card>;Pressable Card
Section titled “Pressable Card”<Card onPress={() => console.log('pressed')} accessibilityLabel="Open card"> <Text>Tap me</Text></Card>| Prop | Type | Default | Description |
| -------------------- | ------------ | ------- | ------------------------- | ------- | ------ | -------------------- |
| children | ReactNode | - | Card content |
| onPress | () => void | - | Make card pressable |
| padding | "sm" | "md" | "lg" | "none" | "md" | Inner padding preset |
| accessibilityLabel | string | - | Required when pressable |
| style | object | - | Additional style override |