Card

Enter your email below to login to your account

Password

Installation

pnpm dlx shadcn@latest add @cortexcn/card

pnpm dlx shadcn@latest add @cortexcn/card

Usage

import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/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

Examples

A card with an action in the header, a form in the content, and buttons in the footer.

Enter your email below to login to your account

Password

import { Button } from "@/components/ui/button";
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export function CardDemo() {
  return (
    <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">
            <div className="grid gap-2">
              <Label htmlFor="email">Email</Label>
              <Input id="email" type="email" placeholder="m@example.com" required />
            </div>
            <div className="grid gap-2">
              <div className="flex items-center">
                <Label htmlFor="password">Password</Label>
                <a
                  href="/forgot-password"
                  className="ml-auto text-sm underline-offset-4 hover:underline"
                >
                  Forgot your password?
                </a>
              </div>
              <Input id="password" type="password" required />
            </div>
          </div>
        </form>
      </CardContent>
      <CardFooter className="flex-col gap-2">
        <Button type="submit" className="w-full">
          Login
        </Button>
        <Button variant="outline" className="w-full">
          Login with Google
        </Button>
      </CardFooter>
    </Card>
  );
}

import { Button } from "@/components/ui/button";import {  Card,  CardAction,  CardContent,  CardDescription,  CardFooter,  CardHeader,  CardTitle,} from "@/components/card";import { Input } from "@/components/ui/input";import { Label } from "@/components/ui/label";export function CardDemo() {  return (    <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">            <div className="grid gap-2">              <Label htmlFor="email">Email</Label>              <Input id="email" type="email" placeholder="m@example.com" required />            </div>            <div className="grid gap-2">              <div className="flex items-center">                <Label htmlFor="password">Password</Label>                <a                  href="/forgot-password"                  className="ml-auto text-sm underline-offset-4 hover:underline"                >                  Forgot your password?                </a>              </div>              <Input id="password" type="password" required />            </div>          </div>        </form>      </CardContent>      <CardFooter className="flex-col gap-2">        <Button type="submit" className="w-full">          Login        </Button>        <Button variant="outline" className="w-full">          Login with Google        </Button>      </CardFooter>    </Card>  );}

Size

Use size="sm" to make the card small. The small size uses tighter spacing.

Weekly report

Sent every Monday at 9:00 AM.

A summary of new signups, active users, and revenue for the past seven days.

<Card size="sm" className="w-full max-w-xs">
  <CardHeader>
    <CardTitle>Weekly report</CardTitle>
    <CardDescription>Sent every Monday at 9:00 AM.</CardDescription>
  </CardHeader>
  <CardContent>
    <p>
      A summary of new signups, active users, and revenue for the past seven
      days.
    </p>
  </CardContent>
  <CardFooter>
    <Button size="sm" variant="outline" className="w-full">
      Manage schedule
    </Button>
  </CardFooter>
</Card>

<Card size="sm" className="w-full max-w-xs">  <CardHeader>    <CardTitle>Weekly report</CardTitle>    <CardDescription>Sent every Monday at 9:00 AM.</CardDescription>  </CardHeader>  <CardContent>    <p>      A summary of new signups, active users, and revenue for the past seven      days.    </p>  </CardContent>  <CardFooter>    <Button size="sm" variant="outline" className="w-full">      Manage schedule    </Button>  </CardFooter></Card>

Spacing

Besides the size prop, the --card-spacing CSS variable controls the gap between sections and the inset of every card part.

More room to breathe

This card sets --card-spacing to 1.5rem.

The gap between sections and the inset of every card part follow the same variable, so one class changes them all.

<Card className="w-full max-w-sm [--card-spacing:--spacing(6)]">
  <CardHeader>
    <CardTitle>More room to breathe</CardTitle>
    <CardDescription>This card sets --card-spacing to 1.5rem.</CardDescription>
  </CardHeader>
  <CardContent>
    <p>
      The gap between sections and the inset of every card part follow the
      same variable, so one class changes them all.
    </p>
  </CardContent>
  <CardFooter>
    <Button>Continue</Button>
  </CardFooter>
</Card>

<Card className="w-full max-w-sm [--card-spacing:--spacing(6)]">  <CardHeader>    <CardTitle>More room to breathe</CardTitle>    <CardDescription>This card sets --card-spacing to 1.5rem.</CardDescription>  </CardHeader>  <CardContent>    <p>      The gap between sections and the inset of every card part follow the      same variable, so one class changes them all.    </p>  </CardContent>  <CardFooter>    <Button>Continue</Button>  </CardFooter></Card>

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

Notifications

Choose what we email you about.

Email notificationsOn
Weekly digestOff
Product updatesOn

const settings = [
  { label: "Email notifications", value: "On" },
  { label: "Weekly digest", value: "Off" },
  { label: "Product updates", value: "On" },
];

<Card className="w-full max-w-sm">
  <CardHeader>
    <CardTitle>Notifications</CardTitle>
    <CardDescription>Choose what we email you about.</CardDescription>
  </CardHeader>
  <CardContent className="-mx-(--card-spacing) -mb-(--card-spacing)">
    <ul className="divide-y border-t">
      {settings.map((setting) => (
        <li
          key={setting.label}
          className="flex items-center justify-between px-(--card-spacing) py-3"
        >
          <span>{setting.label}</span>
          <span className="text-muted-foreground">{setting.value}</span>
        </li>
      ))}
    </ul>
  </CardContent>
  <CardFooter>
    <Button variant="outline" className="w-full">
      Edit preferences
    </Button>
  </CardFooter>
</Card>

const settings = [  { label: "Email notifications", value: "On" },  { label: "Weekly digest", value: "Off" },  { label: "Product updates", value: "On" },];<Card className="w-full max-w-sm">  <CardHeader>    <CardTitle>Notifications</CardTitle>    <CardDescription>Choose what we email you about.</CardDescription>  </CardHeader>  <CardContent className="-mx-(--card-spacing) -mb-(--card-spacing)">    <ul className="divide-y border-t">      {settings.map((setting) => (        <li          key={setting.label}          className="flex items-center justify-between px-(--card-spacing) py-3"        >          <span>{setting.label}</span>          <span className="text-muted-foreground">{setting.value}</span>        </li>      ))}    </ul>  </CardContent>  <CardFooter>    <Button variant="outline" className="w-full">      Edit preferences    </Button>  </CardFooter></Card>

Image

Put an image before the card header to create a card with a cover image.

Area Chart

A composable area chart with gradient fills and tooltips.

<Card className="w-full max-w-sm">
  <img
    src="/images/cover.jpg"
    alt="Cover"
    className="aspect-video w-full object-cover"
  />
  <CardHeader>
    <CardTitle>Area Chart</CardTitle>
    <CardDescription>
      A composable area chart with gradient fills and tooltips.
    </CardDescription>
  </CardHeader>
  <CardFooter>
    <Button className="w-full">View component</Button>
  </CardFooter>
</Card>

<Card className="w-full max-w-sm">  <img    src="/images/cover.jpg"    alt="Cover"    className="aspect-video w-full object-cover"  />  <CardHeader>    <CardTitle>Area Chart</CardTitle>    <CardDescription>      A composable area chart with gradient fills and tooltips.    </CardDescription>  </CardHeader>  <CardFooter>    <Button className="w-full">View component</Button>  </CardFooter></Card>

API Reference

The root container for the card content.

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

CardHeader

Holds the title, description, and an optional action.

Prop	Type	Default
`className`	`string`	-

CardTitle

The card title.

Prop	Type	Default
`className`	`string`	-

CardDescription

Helper text under the title.

Prop	Type	Default
`className`	`string`	-

CardAction

Places content in the top-right of the header, such as a button or a badge.

Prop	Type	Default
`className`	`string`	-

CardContent

The main card body.

Prop	Type	Default
`className`	`string`	-

CardFooter

Actions and secondary content at the bottom of the card.

Prop	Type	Default
`className`	`string`	-

Adapted from the shadcn/ui Card (MIT).