Card

Renders a card component comprising a header, content section, and footer...

Get the latest updates in your inbox.

Installation

npx scrollx-ui@latest add card

Usage

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

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>This is a description of the card.</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Some content for the card goes here.</p>
  </CardContent>
  <CardFooter>
    <Button variant="primary">Action</Button>
  </CardFooter>
</Card>

<Card className="custom-card-style">
  <CardHeader>
    <CardTitle>Custom Card</CardTitle>
    <CardDescription>This card has a custom style.</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Additional content with custom styles.</p>
  </CardContent>
  <CardFooter>
    <Button variant="link">Learn More</Button>
  </CardFooter>
</Card>

API Reference

Card

The Card component is used to create a customizable container with content sections such as title, description, and footer.

Props

Property	Type	Default	Description
`className`	string	`—`	Optional custom class names. Used in: Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter.
`...props`	HTMLDivElement attributes	`—`	Applies to Card and all subcomponents. Inherits all standard div attributes and events.
`CardHeader`	ReactNode	`optional`	Header section of the card.
`CardTitle`	ReactNode	`optional`	Title inside the CardHeader.
`CardDescription`	ReactNode	`optional`	Description inside the CardHeader.
`CardContent`	ReactNode	`optional`	Main content area of the card.
`CardFooter`	ReactNode	`optional`	Footer section, typically for actions.