Card
A versatile container component for grouping related content and actions.
Installation
Install the component:
npx natively-ui add cardUsage
CardDemo.jsx
1import {
2 Card,
3 CardHeader,
4 CardTitle,
5 CardDescription,
6 CardContent,
7 CardFooter,
8 PressableCard
9} from '@/components/ui/card';
10
11export default function MyComponent() {
12 return (
13 <Card>
14 <CardHeader>
15 <CardTitle>Card Title</CardTitle>
16 <CardDescription>Card description goes here.</CardDescription>
17 </CardHeader>
18 <CardContent>
19 <Text>Main content area</Text>
20 </CardContent>
21 <CardFooter>
22 <Text>Footer content</Text>
23 </CardFooter>
24 </Card>
25 );
26}Component API
| Component | Description |
|---|---|
| Card | Base container component with default styling |
| CardHeader | Container for card title and description with appropriate spacing |
| CardTitle | Title component with proper typography styling |
| CardDescription | Description text with subdued styling |
| CardContent | Main content area with appropriate padding |
| CardFooter | Footer area with row layout for actions |
| PressableCard | Interactive card with press handling capabilities |
Props
| Component | Type | Description |
|---|---|---|
| Card | ViewProps | Accepts all standard React Native View props including className |
| CardHeader | ViewProps | Accepts all standard React Native View props including className |
| CardTitle | TextProps | Accepts all standard React Native Text props including className |
| CardDescription | TextProps | Accepts all standard React Native Text props including className |
| CardContent | ViewProps | Accepts all standard React Native View props including className |
| CardFooter | ViewProps | Accepts all standard React Native View props including className |
| PressableCard | PressableProps | Accepts all standard React Native Pressable props including onPress and className |
Features
- Compound component pattern for flexible layouts
- Interactive variants with PressableCard
- Customizable styling through className prop
- Support for header, content, and footer sections
- Accessible press handling
- Built with Tailwind CSS and React Native
Examples
Basic Usage
CardDemo.jsx
1<Card>
2 <CardHeader>
3 <CardTitle>Featured Post</CardTitle>
4 <CardDescription>Check out this amazing content!</CardDescription>
5 </CardHeader>
6 <CardContent>
7 <Text>
8 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
9 Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
10 </Text>
11 </CardContent>
12 <CardFooter>
13 <Button>Read More</Button>
14 </CardFooter>
15</Card>Interactive Card
CardDemo.jsx
1<PressableCard
2 onPress={() => {
3 // Handle card press
4 navigation.navigate('Details');
5 }}
6>
7 <CardContent>
8 <View style={{ flexDirection: 'row', alignItems: 'center' }}>
9 <Icon name="arrow-right" size={24} />
10 <Text style={{ marginLeft: 8 }}>Tap to view details</Text>
11 </View>
12 </CardContent>
13</PressableCard>Custom Styling
CardDemo.jsx
1<Card className="bg-slate-100 border-slate-300 rounded-xl">
2 <CardHeader className="p-6">
3 <CardTitle className="text-blue-600">
4 Custom Card
5 </CardTitle>
6 <CardDescription className="text-slate-600">
7 Card with custom styling applied
8 </CardDescription>
9 </CardHeader>
10 <CardContent className="p-6">
11 <Text>Content with custom styling</Text>
12 </CardContent>
13</Card>Card with Actions
CardDemo.jsx
1<Card>
2 <CardHeader>
3 <CardTitle>Confirm Action</CardTitle>
4 <CardDescription>
5 Are you sure you want to proceed with this action?
6 </CardDescription>
7 </CardHeader>
8 <CardFooter style={{ gap: 8 }}>
9 <Button variant="outline" style={{ flex: 1 }}>
10 Cancel
11 </Button>
12 <Button style={{ flex: 1 }}>
13 Confirm
14 </Button>
15 </CardFooter>
16</Card>