Card

Installation

Install the component via the CLI in one command.

npx shadcn@latest add @intentui/card

Manual installation

Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.

npm install cn

Anatomy

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

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
    <CardAction>Card Action</CardAction>
  </CardHeader>
  <CardContent>Card Content</CardContent>
  <CardFooter>Card Footer Button</CardFooter>
</Card>

Spacing

Use --card-spacing to control the card's vertical padding, the gap between sections, and the horizontal padding of its header, content, and footer. The default is --spacing(6).

<Card className="[--card-spacing:--spacing(4)] sm:[--card-spacing:--spacing(6)]">
  <CardHeader title="Users" />
  <CardContent>Card content</CardContent>
</Card>

Examples

With form

Sometimes, you may need a card with a form inside.

Action

You can add actions to your card, which will be aligned to the right. This example demonstrates using the menu component, but you can use any component you prefer.

With table

Use bleed and set the table's --gutter to var(--card-spacing) to align its columns with the card's padding.

For table docs, check out the Table docs.

Section title

Sometimes, you may only need a card header without wrapping container itself. Of course, you need don't want the default padding, right? So I have prop called withoutPadding to help you out.

<CardHeader
  title="List Daemons"
  description="List of daemons to use in your sites."
/>

Component API

Card

CardAction

CardContent

CardDescription

CardFooter

CardHeader

CardTitle