Documentation Index
Fetch the complete documentation index at: https://mintlify.com/aurelienbobenrieth/gadget/llms.txt
Use this file to discover all available pages before exploring further.
Overview
The Card component provides a flexible container with multiple sub-components for building structured content layouts. Includes CardHeader, CardTitle, CardDescription, CardContent, and CardFooter.
Import
import {
Card,
CardHeader,
CardTitle,
CardDescription,
CardContent,
CardFooter
} from "@aurelienbbn/gadget-ui/components";
Basic Usage
<Card>
<CardHeader>
<CardTitle>Card Title</CardTitle>
<CardDescription>A brief description of the card content.</CardDescription>
</CardHeader>
<CardContent>
<p>Your main content goes here.</p>
</CardContent>
</Card>
Sub-Components
Card
The root container component.
<Card>
{/* Card content */}
</Card>
<CardHeader>
<CardTitle>Title</CardTitle>
<CardDescription>Description</CardDescription>
</CardHeader>
CardTitle
Heading for the card (renders as <h3>).
<CardTitle>Your Title</CardTitle>
CardDescription
Subheading or description text (renders as <p>).
<CardDescription>Additional context or description</CardDescription>
CardContent
Main content area of the card.
<CardContent>
{/* Your content */}
</CardContent>
<CardFooter>
<Button>Action</Button>
</CardFooter>
Props
All Card sub-components extend their respective HTML element attributes:
Additional CSS classes for the Card container.
Additional CSS classes for CardHeader.
Additional CSS classes for CardTitle.
CardDescription.className
Additional CSS classes for CardDescription.
Additional CSS classes for CardContent.
Additional CSS classes for CardFooter.
Examples
Complete Card
<Card>
<CardHeader>
<CardTitle>Feature Name</CardTitle>
<CardDescription>
This feature helps you accomplish important tasks.
</CardDescription>
</CardHeader>
<CardContent>
<p>Detailed information about the feature.</p>
</CardContent>
<CardFooter>
<Button variant="primary">Learn More</Button>
<Button variant="ghost">Dismiss</Button>
</CardFooter>
</Card>
Simple Card
<Card>
<CardContent>
<p>Just some content without header or footer.</p>
</CardContent>
</Card>
Custom Styling
<Card className="max-w-md">
<CardHeader className="bg-accent-muted/10">
<CardTitle className="text-accent">Highlighted</CardTitle>
</CardHeader>
<CardContent>
<p>Content with custom header styling.</p>
</CardContent>
</Card>
Component Definition
Location: packages/gadget-ui/src/components/card.tsx
All Card sub-components use forwardRef to support ref forwarding to their underlying HTML elements.