Usage
import { Card } from '@kivora/react';
<Card>
<p>Card content goes here</p>
</Card>
Examples
Basic Card
<Card>
<h3>Simple Card</h3>
<p>This is a basic card with default settings.</p>
</Card>
<Card header="Profile">
<p>Name: Alice Johnson</p>
<p>Role: Developer</p>
</Card>
<Card
header="User Profile"
footer="Last updated: 2 hours ago"
>
<p>Name: Alice Johnson</p>
<p>Email: [email protected]</p>
<p>Department: Engineering</p>
</Card>
Shadow Variants
<Card shadow="none">
No shadow
</Card>
Without Border
<Card bordered={false} shadow="md">
<p>Card without border</p>
</Card>
No Padding
<Card noPadding header="Image Gallery">
<img src="/gallery.jpg" alt="Gallery" className="w-full" />
</Card>
noPadding when you need full control over spacing, such as with images or custom layouts.
Complex Example
<Card
header="Project Dashboard"
footer={
<div className="flex justify-between">
<span>5 tasks remaining</span>
<Button size="sm">View All</Button>
</div>
}
shadow="md"
>
<div className="space-y-4">
<div>
<h4>In Progress</h4>
<p>3 tasks</p>
</div>
<div>
<h4>Completed</h4>
<p>12 tasks</p>
</div>
</div>
</Card>
Props
Optional header slot rendered above the body with bottom border
Optional footer slot rendered below the body with top border
shadow
'none' | 'sm' | 'md' | 'lg'
default:"sm"
Box-shadow size
Render a border around the card
Remove default body padding (header and footer keep their padding)
Styling
- Cards use
bg-card and text-card-foreground theme tokens
- Rounded corners with
rounded-xl
- Header and footer have consistent padding (
px-5 py-3)
- Body padding can be removed with
noPadding prop