Card

import { Button } from "@/components/ui/button";
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,

Installation

bunnpmpnpmyarn
$ pnpm dlx shadcn@latest add https://shadcn-cssinjs.com/r/card.json
Copy

Usage

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

Copy<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>

Composition

Use the following composition to build a Card:

CopyCard
├── CardHeader
│   ├── CardTitle
│   ├── CardDescription
│   └── CardAction
├── CardContent
└── CardFooter

Examples

Size

Use the size="sm" prop for a more compact card.

import { ChevronRightIcon } from "lucide-react";

import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,

Spacing

Customize card spacing by setting the --card-spacing variable.

"use client";

import { useState } from "react";

import { Button } from "@/components/ui/button";
import {

Image

Add an image to the top of the card.

Featured

Design systems meetup

A practical talk on component APIs, accessibility, and shipping faster.

View Event

Copy

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardAction,
  CardDescription,

View Code

RTL

To enable right-to-left support, see the RTL guide.

"use client";

import * as React from "react";

import { useTranslation } from "@/components/language-selector";
import type { Translations } from "@/components/language-selector";

API Reference

Card

The Card component is the root container for card content.

CardHeader

The CardHeader component is used for a title, description, and optional action.

CardTitle

The CardTitle component is used for the card title.

CardDescription

The CardDescription component is used for helper text under the title.

CardAction

The CardAction component places content in the top-right of the header (for example, a button or a badge).

CardContent

The CardContent component is used for the main card body.

CardFooter

The CardFooter component is used for actions and secondary content at the bottom of the card.