1. Docs
  3. Components
  5. Card

Card

Displays a card with header, content, and footer.

Docs

Installation

npx shadcn@latest add @kanpeki/card

Anatomy

import { Card } from "~/components/ui/card";

<Card.Root>
  <Card.Header>
    <Card.Title>Card Title</Card.Title>
    <Card.Description>Card Description</Card.Description>
    <Card.Action>Card Action</Card.Action>
  </Card.Header>
  <Card.Content>
    <p>Card Content</p>
  </Card.Content>
  <Card.Footer>
    <p>Card Footer</p>
  </Card.Footer>
</Card.Root>

Examples

CalendarCheckbox