Card

Card component with header, content, footer, title, description, and action slots

Preview

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

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>This is a card description with helpful information.</CardDescription>
    <CardAction>
      <button>Action</button>
    </CardAction>
  </CardHeader>
  <CardContent>
    <p>Main card content goes here. The card provides a flexible container for grouping related information.</p>
  </CardContent>
  <CardFooter>
    <button>Footer Action</button>
  </CardFooter>
</Card>

Props

The Card component is composed of several sub-components that accept standard HTML div props:

Prop

Type

All card components accept standard HTML div props including className for custom styling.

Installation

npx shadcn@latest add --registry https://uifoundry.com/r card

If you encounter issues, check the registry setup guide for configuration help.

Registry Dependencies

This component depends on the following UIFoundry registry components:

@uifoundry/style-utils - Tailwind utility functions including cn() class merger

Dependencies

This component requires the following NPM packages:

React - JavaScript library for building user interfaces