Back to Components

Card

Displays a card with header, content, and footer sections.

layout
container
surface

Preview

Card Title

Card Description

Card Content

This is where the main content of your card goes. You can add any components, text, or other elements here.

Code

TSX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import {
      Card,
      CardContent,
      CardDescription,
      CardFooter,
      CardHeader,
      CardTitle,
    } from "@/components/ui/card"
    import { Button } from "@/components/ui/button"

    export function CardDemo() {
      return (
        <Card className="w-[350px]">
          <CardHeader>
            <CardTitle>Card Title</CardTitle>
            <CardDescription>Card Description</CardDescription>
          </CardHeader>
          <CardContent>
            <p>Card Content</p>
          </CardContent>
          <CardFooter className="flex justify-between">
            <Button variant="outline">Cancel</Button>
            <Button>Submit</Button>
          </CardFooter>
        </Card>
      )
    }

API Reference

PropTypeDefaultDescription
classNamestring-Additional CSS classes to apply to the card.
View Full Documentation