Card

Default

Header with title and description, body in CardContent.

Usage

Import the parts you need from the component's folder.

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

Small

Set size to sm on Card for tighter vertical padding and gaps — good for compact widgets.

With footer

Add CardFooter to place action buttons at the bottom.

Custom spacing

Override the default gap-8 on Card and the header gap with class props to tune the space between sections.

Edge to edge

Drop the horizontal padding with px-0 so a list or image runs flush to the card edges; each row adds its own inset.

Image header

A leading media block as the first child sits flush to the top and sides; the card clips it with overflow-hidden.

Card grid

Common dashboard pattern: a row of stats cards in a responsive grid with gap-x-2 gap-y-6.

Anatomy

Import all parts and piece them together.

<script setup>
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
</script>

<template>
  <Card>
    <CardHeader>
      <CardTitle />
      <CardDescription />
      <CardAction />
    </CardHeader>
    <CardContent />
    <CardFooter />
  </Card>
</template>

API Reference