Card

A card groups related content and actions.

On this page

Enter your email below to login to your account

<Card className="w-full max-w-sm">
  <CardHeader>
    <CardTitle>Login to your account</CardTitle>
    <CardDescription>
      Enter your email below to login to your account
    </CardDescription>
    <CardAction>
      <Button variant="link">Sign Up</Button>
    </CardAction>
  </CardHeader>
  <CardContent>
    <form>
      <div className="flex flex-col gap-6">
        <TextField className="w-full">
          <Label htmlFor="email">Email</Label>
          <Input
            id="email"
            type="email"
            placeholder="m@example.com"
            required
          />
        </TextField>
        <TextField className="w-full">
          <div className="flex items-center">
            <Label htmlFor="password">Password</Label>
            <a
              href="#"
              className="ml-auto inline-block text-sm underline-offset-4 hover:underline"
            >
              Forgot your password?
            </a>
          </div>
          <Input id="password" type="password" required />
        </TextField>
      </div>
    </form>
  </CardContent>
  <CardFooter className="flex-col gap-2">
    <Button variant="primary" type="submit" className="w-full">
      Login
    </Button>
    <Button variant="default" className="w-full">
      Login with Google
    </Button>
  </CardFooter>
</Card>

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/card

Usage

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

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
    <CardAction>Card Action</CardAction>
  </CardHeader>
  <CardContent>
    <p>Card Content</p>
  </CardContent>
  <CardFooter>
    <p>Card Footer</p>
  </CardFooter>
</Card>

Examples

Size

Small Card

This card uses the small size variant.

The card component supports a size prop that can be set to "sm" for a more compact appearance.

With image

Beautiful Landscape

A stunning view that captures the essence of natural beauty.

API Reference

Card

A card groups related content and actions into a single container.

Supports all div attributes.

Prop	Type	Default

CardHeader

The header of the card. Contains the title, description, and an optional action.

Supports all div attributes.

Prop	Type	Default

CardTitle

The title of the card.

Supports all div attributes.

Prop	Type	Default

CardDescription

The description of the card, displayed below the title.

Supports all div attributes.

Prop	Type	Default

CardAction

An action displayed at the end of the card header, such as a button or link.

Supports all div attributes.

Prop	Type	Default

CardContent

The main content of the card.

Supports all div attributes.

Prop	Type	Default

CardFooter

The footer of the card, typically containing actions.

Supports all div attributes.

Prop	Type	Default

Last updated on 6/16/2026