Card

A structural container completely stripped of rounding and shadows.

Basic usage of the Monolith Card.

Project Status

View and manage the current project status.

The project is currently on track. All systems are operational and no issues have been detected in the latest deployment.

Installation


$ pnpm dlx shadcn@latest add "https://ui.manpuc.me/r/card.json"

Usage

After you add the component with the CLI, import it from your UI folder:

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
  CardAction,
} from "@/components/ui/card"
 
export function MyComponent() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
        <CardDescription>Card Description</CardDescription>
        <CardAction>
          <button>Options</button>
        </CardAction>
      </CardHeader>
      <CardContent>
        <p>Card Content</p>
      </CardContent>
      <CardFooter>
        <p>Card Footer</p>
      </CardFooter>
    </Card>
  );
}

Examples

With Form

Create Project

Deploy your new project in one-click.

Stats

Total Revenue

$45,231.89

+20.1%from last month

With Action

The Monolith Card includes a custom CardAction slot for placing action buttons (like dropdown menus) perfectly positioned in the header grid.

Team Members

Manage your team settings.

Sofia Davis

m@example.com

API Reference

The Card consists of several sub-components that structure content efficiently:

Component	Description
`Card`	The main container element (border, background, padding wrapper).
`CardHeader`	Contains the title, description, and action slots.
`CardTitle`	The primary heading element.
`CardDescription`	Secondary muted text below the title.
`CardAction`	A slot perfectly aligned to the right of the header for dropdowns or icons.
`CardContent`	The main body area for content and forms.
`CardFooter`	The bottom section for action buttons or links.

Calendar Checkbox

On This Page

Installation Usage Examples With Form Stats With Action API Reference