Card

Displays a card with header, content, and footer.

Preview

Code

Enter your email below to login to your account

Installation

CLI

Manual

npx shadcn@latest add @kanpeki/card

Anatomy

Single import

Multiple imports

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

Preview

Code

Enter your email below to login to your account

API Reference

Card.Root

Prop	Type	Default
`children`	`ReactNode`
`className`	`string`

Card.Header

Prop	Type	Default
`children`	`ReactNode`
`className`	`string`

Card.Title

Prop	Type	Default
`children`	`ReactNode`
`className`	`string`

Card.Description

Prop	Type	Default
`children`	`ReactNode`
`className`	`string`

Card.Action

Prop	Type	Default
`children`	`ReactNode`
`className`	`string`

Card.Content

Prop	Type	Default
`children`	`ReactNode`
`className`	`string`

Card.Footer

Prop	Type	Default
`children`	`ReactNode`
`className`	`string`

Calendar Carousel

On This Page

Installation
Anatomy
Examples
API Reference
Card.Root
Card.Header
Card.Title
Card.Description
Card.Action
Card.Content
Card.Footer

Contribute