Card

lunar add card

import {
Card,
CardHeader,
CardTitle,
CardDescription,
CardContent,
CardFooter,
} from '@/components/ui/card';

<Card>
<CardHeader>
  <CardTitle>Card Title</CardTitle>
  <CardDescription>Card description goes here.</CardDescription>
</CardHeader>
<CardContent>
  <Text>Main content of the card.</Text>
</CardContent>
<CardFooter>
  <Button>Action</Button>
</CardFooter>
</Card>

// Default - with border and shadow
<Card variant="default">
{/* ... */}
</Card>
 
// Elevated - more shadow
<Card variant="elevated">
{/* ... */}
</Card>
 
// Outline - border only
<Card variant="outline">
{/* ... */}
</Card>
 
// Ghost - no background or border
<Card variant="ghost">
{/* ... */}
</Card>
 
// Filled - muted background
<Card variant="filled">
{/* ... */}
</Card>

<Card>
<CardContent>
  <Text>Simple card with just content.</Text>
</CardContent>
</Card>

<Card>
<CardHeader>
  <CardTitle>Settings</CardTitle>
  <CardDescription>Manage your account settings.</CardDescription>
</CardHeader>
<CardContent>
  <View className="gap-4">
    <Input label="Name" value={name} onChangeText={setName} />
    <Input label="Email" value={email} onChangeText={setEmail} />
  </View>
</CardContent>
<CardFooter alignment="end">
  <Button variant="outline">Cancel</Button>
  <Button>Save</Button>
</CardFooter>
</Card>

// Start (default)
<CardFooter alignment="start">
<Button>Action</Button>
</CardFooter>
 
// Center
<CardFooter alignment="center">
<Button>Action</Button>
</CardFooter>
 
// End
<CardFooter alignment="end">
<Button>Action</Button>
</CardFooter>
 
// Between
<CardFooter alignment="between">
<Button variant="outline">Cancel</Button>
<Button>Submit</Button>
</CardFooter>

<CardContent spacing="sm">
{/* Smaller top padding */}
</CardContent>
 
<CardContent spacing="default">
{/* Default top padding */}
</CardContent>
 
<CardContent spacing="lg">
{/* Larger top padding */}
</CardContent>
 
<CardContent spacing="none">
{/* No top padding */}
</CardContent>