SERP UI logo
SERPUI
Docs
Card

Card

A versatile container component used to group related content and actions, typically featuring distinct sections like header, content, and footer for clear organization.

This preview demonstrates a Card component used to encapsulate a form, providing structure and visual separation.

Loading...

Installation

To use the Card component in your project, you need to install it. You have two options: using the CLI (Command Line Interface) for a quick setup, or following the Manual steps for more control and understanding.

The CLI command is the easiest way to add the Card component. It automatically handles downloading the necessary code for you. Running this command in your project's terminal will add the card component files.

npx shadcn@latest add card

Usage

Once installed, import the necessary parts of the Card component.

  Card, // The main container element for the card
  CardContent, // The primary content area of the card
  CardDescription, // A subtitle or description, usually placed in the header
  CardFooter, // The bottom section, often used for actions or meta information
  CardHeader, // The top section, typically containing title and description
  CardTitle, // The main title of the card, usually placed in the header
} from "@/components/ui/card"; // Adjust path as needed

Here's the basic structure for using the Card component:

  • Card is the main wrapper.

  • CardHeader (optional) contains the CardTitle and CardDescription.

  • CardContent (optional) holds the main body of the card.

  • CardFooter (optional) holds actions or supplementary information at the bottom.

<Card className="w-[350px]">
  <CardHeader>
    <CardTitle>Create project</CardTitle>
    <CardDescription>Deploy your new project in one-click.</CardDescription>
  </CardHeader>
  <CardContent>
    <p>This is the main content area of the card.</p>
  </CardContent>
  <CardFooter className="flex justify-between">
    <Button variant="outline">Cancel</Button>
    <Button>Deploy</Button>
  </CardFooter>
</Card>

Examples

Here's another example showcasing a common use case for cards, such as displaying settings options.

Loading...

Changelog

11-03-2024 a11y for title and description

  • Changed the CardTitle and CardDescription components to use div instead of h3 and p to improve accessibility and allow for more flexible semantic structures within the card header. While visually styled as headings/paragraphs, using div prevents imposing a fixed heading level, offering more control to the implementer regarding document outline and accessibility structure.

const CardTitle = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "text-lg font-semibold leading-none tracking-tight",
      className,
    )}
    {...props}
  />
));
CardTitle.displayName = "CardTitle";

const CardDescription = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("text-muted-foreground text-sm", className)}
    {...props}
  />
));
CardDescription.displayName = "CardDescription";
CalendarCarousel