Components
Card
Versatile container component for grouping related content with header, body, and footer sections.
Card
A structured container for grouping content with optional header, body, and footer regions.
Import
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@mks2508/mks-ui/react';Basic Usage
Basic Usage
Card Title
Card description text
Card body content goes here.
.tsx
<Card>
<CardHeader>
<CardTitle>Card Title</CardTitle>
<CardDescription>Card description text</CardDescription>
</CardHeader>
<CardContent>
<p>Card body content goes here.</p>
</CardContent>
<CardFooter>
<Button>Action</Button>
</CardFooter>
</Card>Simple Card
Simple Card
Simple card with just padding and content.
.tsx
<Card className="p-6">
<p>Simple card with just padding and content.</p>
</Card>Glassmorphism Card
Glassmorphism
Glass Card
Frosted glass effect
.tsx
<Card className="bg-white/10 backdrop-blur-lg border-white/20">
<CardHeader>
<CardTitle>Glass Card</CardTitle>
</CardHeader>
<CardContent>
Frosted glass effect
</CardContent>
</Card>API Reference
| Component | Props | Description |
|---|---|---|
Card | className, children | Root container |
CardHeader | className, children | Header section with padding |
CardTitle | className, children | Title text (h3) |
CardDescription | className, children | Subtitle text |
CardContent | className, children | Body content area |
CardFooter | className, children | Footer with action buttons |