Card

Displays a card with header, content, and footer.

Enter your email below to login to your account

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

Installation


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

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>

Composition

Use the following composition to build a Card:

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

Size

Use the size="sm" prop to set the size of the card to small. The small size variant uses smaller spacing.

Scheduled reports

Weekly snapshots. No more manual exports.

Choose a schedule (daily, or weekly).
Send to channels or specific teammates.
Include charts, tables, and key metrics.

import { ChevronRightIcon } from "lucide-react";

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

Spacing

In addition to the size prop, you can use the --card-spacing CSS variable to control the spacing between sections and the inset of card parts.

Enter your email below to login to your account

"use client";

import * as React from "react";

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

Use negative margins with -mx-(--card-spacing) to make content go edge to edge while keeping it aligned with the card inset. When the edge-to-edge content sits above a footer, use -mb-(--card-spacing) on CardContent to remove the section gap.

Review the terms before accepting the agreement.

These terms govern your use of the workspace, including access to shared documents, project files, and collaboration tools.

You are responsible for the content you upload and for ensuring that your team has the appropriate permissions to view or edit it.

We may update features or limits as the service evolves. When those changes materially affect your workflow, we will notify your workspace administrators.

By continuing, you agree to keep your account credentials secure and to follow your organization's acceptable use policies.

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

Image

Add an image before the card header to create a card with an image.

Featured

Design systems meetup

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

import Image from "next/image";

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

RTL

To enable RTL support in shadcn/ui, see the RTL configuration 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.

Prop	Type	Default
`size`	`"default" \| "sm"`	`"default"`
`className`	`string`	-

CardHeader

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

Prop	Type	Default
`className`	`string`	-

CardTitle

The CardTitle component is used for the card title.

Prop	Type	Default
`className`	`string`	-

CardDescription

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

Prop	Type	Default
`className`	`string`	-

CardAction

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

Prop	Type	Default
`className`	`string`	-

CardContent

The CardContent component is used for the main card body.

Prop	Type	Default
`className`	`string`	-

CardFooter

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

Prop	Type	Default
`className`	`string`	-

Calendar Carousel

On This Page

Installation Usage Composition Size Spacing Image RTL API Reference Card CardHeader CardTitle CardDescription CardAction CardContent CardFooter

Edit this page Follow @shadcnlabs Join community