Card

A card component with header, title, description, action, content, and footer sub-components.

Create project

Deploy your new project in one-click.

Choose a framework and configure your new project settings.

Installation

Install the card component via the shadcn CLI:

bash

npx shadcn@latest add "https://dexterityui.vercel.app/r/card.json"

No additional dependencies required.

Sub-components

<Card>The root container with border, shadow, and rounded corners.

<CardHeader>Top section with grid layout for title and actions.

<CardTitle>Semibold title text.

<CardDescription>Muted description text below the title.

<CardAction>Optional action slot aligned to the top-right of the header.

<CardContent>Main body content area with horizontal padding.

<CardFooter>Bottom section with flex layout for actions.

With Action

Notifications

You have 3 unread messages.

Your recent notifications will appear here.

Source

tsx

import * as React from "react"
import { cn } from "@/lib/utils"

function Card({ className, ...props }) {
    return (
        <div
            data-slot="card"
            className={cn(
                "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
                className
            )}
            {...props}
        />
    )
}

function CardHeader({ className, ...props }) {
    return (
        <div
            data-slot="card-header"
            className={cn(
                "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 ...",
                className
            )}
            {...props}
        />
    )
}

function CardTitle({ className, ...props }) {
    return (
        <div
            data-slot="card-title"
            className={cn("leading-none font-semibold", className)}
            {...props}
        />
    )
}

function CardDescription({ className, ...props }) {
    return (
        <div
            data-slot="card-description"
            className={cn("text-muted-foreground text-sm", className)}
            {...props}
        />
    )
}

function CardContent({ className, ...props }) {
    return (
        <div
            data-slot="card-content"
            className={cn("px-6", className)}
            {...props}
        />
    )
}

function CardFooter({ className, ...props }) {
    return (
        <div
            data-slot="card-footer"
            className={cn("flex items-center px-6", className)}
            {...props}
        />
    )
}

export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }