Card
A flexible container component for grouping related content. Compose cards using sub-components.
Installation
Install the card component using the shadcn CLI:
npx shadcn@latest add https://tezosx-ui.vercel.app/registry/tezosx/card.jsonBasic Card
Card Title
Card description goes here. This is a simple card example.
This is the main content area of the card. You can put any content here.
<Card>
<CardHeader>
<CardTitle>Card Title</CardTitle>
<CardDescription>
Card description goes here.
</CardDescription>
</CardHeader>
<CardContent>
<p>Main content here.</p>
</CardContent>
<CardFooter>
<Button>Action</Button>
</CardFooter>
</Card>Composition Examples
Simple Card
Card with just content, no header or footer.
This is a simple card with only content. Perfect for displaying information without a title.
<Card>
<CardContent className="pt-6">
<p>Simple content here.</p>
</CardContent>
</Card>Form Card
Card containing a form with multiple inputs.
Create Account
Enter your details to create a new account.
<Card>
<CardHeader>
<CardTitle>Create Account</CardTitle>
<CardDescription>Enter your details</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="space-y-2">
<Label htmlFor="name">Name</Label>
<Input id="name" />
</div>
{/* More inputs... */}
</CardContent>
<CardFooter className="gap-2">
<Button variant="outline">Cancel</Button>
<Button>Create</Button>
</CardFooter>
</Card>Information Card
Card displaying stats or information.
Total Users
1,234
+20.1% from last month
Revenue
$45.2k
+15.3% from last month
Active
573
+5.2% from last month
<Card>
<CardHeader className="pb-3">
<CardDescription>Total Users</CardDescription>
<CardTitle className="text-4xl">1,234</CardTitle>
</CardHeader>
<CardContent>
<div className="text-xs">+20.1% from last month</div>
</CardContent>
</Card>Sub-Components
| Component | Description |
|---|---|
| Card | Main container with border and shadow |
| CardHeader | Container for title and description |
| CardTitle | Main heading (h3) |
| CardDescription | Secondary text below title |
| CardContent | Main content area |
| CardFooter | Container for actions or additional info |
Customization
All card components accept className for custom styling:
- Add hover effects:
className="hover:shadow-lg transition-shadow" - Remove border:
className="border-0" - Add gradient background:
className="bg-gradient-to-br from-primary to-secondary" - Adjust padding:
CardContent className="p-8"