Morpha UI
ComponentsData Display

Card

A flexible container for grouping related content and actions.

Overview

A card groups related content and actions into a single surface. Compose it from CardHeader, CardTitle, CardDescription, CardContent, and CardFooter.

Create project
Deploy your new project in one click.

Give your project a name and pick a region to get started.

$ npx morpha-ui add card

Examples

With action

Use CardAction to place a control (such as a button) in the top-right of the header.

Notifications
You have 3 unread messages.

Manage how and when you receive updates from your team.

Installation

Morpha UI components are distributed via the Morpha CLI (coming in a later step): npx morpha-ui add card. In the meantime, since this is the base shadcn component, you can also add it directly:

npx shadcn@latest add card

API Reference

The Card root accepts a size prop plus standard <div> attributes. The sub-components — CardHeader, CardTitle, CardDescription, CardAction, CardContent, and CardFooter — are layout wrappers that forward <div> props.

Prop

Type

Accessibility

  • Use the full composition so structure is conveyed: title in CardTitle, supporting text in CardDescription.
  • Place a semantic heading inside CardTitle when the card titles a region of the page.
  • CardContent and CardFooter are generic containers — keep interactive controls keyboard reachable.

Switch

A toggle control for on/off states.

Badge

A small label for status, counts, or categories.

On this page

OverviewExamplesWith actionInstallationAPI ReferenceAccessibility