Elements Pro launch: $79 for the first 50 with LAUNCH50 · $129 standard.

Components / Objects / Card

Card.

FreePrimitive

A composed object container with header, content, action, footer slots, and a clipped-corner brand variant.

Demo dataResponsive
Project Apollo
Build the future. Ship with confidence.
Active

Updated two hours ago by Sarah Chen.

OperationsAP-104

Installation

pnpm dlx shadcn@latest add https://elements.micropreneur.dev/r/card.json

The shadcn CLI writes the source into your project. Files added:

  • components/ui/card.tsxui
  • lib/utils.tslib
Dependenciesclsxtailwind-merge

API

Card

PropTypeDefaultDescription
clippedbooleanfalse
size'default' | 'sm''default'

Also accepts ComponentProps<'div'>.

CardHeader

No props of its own.

Also accepts ComponentProps<'div'>.

CardTitle

No props of its own.

Also accepts ComponentProps<'div'>.

CardDescription

No props of its own.

Also accepts ComponentProps<'div'>.

CardAction

No props of its own.

Also accepts ComponentProps<'div'>.

CardContent

No props of its own.

Also accepts ComponentProps<'div'>.

CardFooter

No props of its own.

Also accepts ComponentProps<'div'>.

Accessibility

  • A plain div structure. Use CardTitle with a real heading inside it when the card starts a section.