Card

Popular

Container with border, shadow, and sections.

containerlayoutsurface

Import

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

Basic Usage

Card Preview

Card Title

This is a description of the card content.

Cards are flexible containers for grouping related content and actions.

Code

tsx

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card description goes here</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card content goes here.</p>
  </CardContent>
  <CardFooter>
    <Button>Action</Button>
  </CardFooter>
</Card>

Variants

Different card styles

1<div className="grid gap-4 md:grid-cols-3">
2  <Card variant="default">
3    <CardContent className="pt-6">Default card</CardContent>
4  </Card>
5  <Card variant="outline">
6    <CardContent className="pt-6">Outline card</CardContent>
7  </Card>
8  <Card variant="elevated">
9    <CardContent className="pt-6">Elevated card</CardContent>
10  </Card>
11</div>

Hoverable

Add hover effect

1<Card hover className="cursor-pointer">
2  <CardContent className="pt-6">
3    Hover over me
4  </CardContent>
5</Card>

Ready to use this component?

Configure your app with the features you need and download production-ready code.

Start Configuring