Card

Displays a card with header, content, and footer.

Create Project

Deploy your new project in one-click.

Name

Installation

uvx django_shadcn@latest add card

Usage

<c-card class="w-[380px]">
  <c-card.header>
    <c-card.title>Title</c-card.title>
    <c-card.description>Description</c-card.description>
  </c-card.header>
  <c-card.content>Content</c-card.content>
  <c-card.footer> Footer </c-card.footer>
</c-card>

Examples

Create Project

Deploy your new project in one-click.

Name

<c-card class="w-[380px]">
  <c-card.header>
    <c-card.title>Create Project</c-card.title>
    <c-card.description
      >Deploy your new project in one-click.</c-card.description
    >
  </c-card.header>
  <c-card.content class="space-y-2">
    <div class="flex flex-col space-y-1">
      <c-label for="name">Name</c-label>
      <c-input id="name" placeholder="Name of your project" />
    </div>
  </c-card.content>
  <c-card.footer class="flex justify-between">
    <c-button variant="outline">Cancel</c-button>
    <c-button>Submit</c-button>
  </c-card.footer>
</c-card>