Components

Card

Displays a card with header, content, and footer.

Enter your email below to login to your account

Installation#

Install the dependencies
```
npm install cn
```

Copy the source into your project

components/ui/card.tsx

import * as React from "react"import { cn } from "cn"function Card({  className,  size = "default",  ...props}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {  return (    <div      data-slot="card"      data-size={size}      className={cn(        "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",        className      )}      {...props}    />  )}function CardHeader({ className, ...props }: React.ComponentProps<"div">) {  return (    <div      data-slot="card-header"      className={cn(        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)",        className      )}      {...props}    />  )}function CardTitle({ className, ...props }: React.ComponentProps<"div">) {  return (    <div      data-slot="card-title"      className={cn(        "font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",        className      )}      {...props}    />  )}function CardDescription({ className, ...props }: React.ComponentProps<"div">) {  return (    <div      data-slot="card-description"      className={cn("text-sm text-muted-foreground", className)}      {...props}    />  )}function CardAction({ className, ...props }: React.ComponentProps<"div">) {  return (    <div      data-slot="card-action"      className={cn(        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",        className      )}      {...props}    />  )}function CardContent({ className, ...props }: React.ComponentProps<"div">) {  return (    <div      data-slot="card-content"      className={cn("px-(--card-spacing)", className)}      {...props}    />  )}function CardFooter({ className, ...props }: React.ComponentProps<"div">) {  return (    <div      data-slot="card-footer"      className={cn(        "flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)",        className      )}      {...props}    />  )}export {  Card,  CardHeader,  CardFooter,  CardTitle,  CardAction,  CardDescription,  CardContent,}

Make sure the foundation is in place
Components read their colors, radius and surfaces from the tokens in app/globals.css. See Theming.

Usage#

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

Examples#

Edge To Edge

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.

Image

Featured

Design systems meetup

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

Small

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.

Spacing