# Card

A structural container completely stripped of rounding and shadows.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).



Basic usage of the Monolith Card.



<ComponentPreview name="card-demo">
  <div className="py-8 w-full max-w-sm mx-auto">
    <Card className="w-[350px]">
      <CardHeader>
        <CardTitle>
          Project Status
        </CardTitle>

        <CardDescription>
          View and manage the current project status.
        </CardDescription>
      </CardHeader>

      <CardContent>
        <div className="text-sm text-muted-foreground">
          The project is currently on track. All systems are operational and no issues have been detected in the latest deployment.
        </div>
      </CardContent>

      <CardFooter className="justify-end gap-2 border-t pt-6">
        <Button variant="outline">
          Dismiss
        </Button>

        <Button>
          Details
        </Button>
      </CardFooter>
    </Card>
  </div>
</ComponentPreview>

## Installation [#installation]

```bash
npx shadcn@latest add "https://ui.manpuc.me/r/card.json"
```

## Usage [#usage]

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

```tsx
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 [#examples]

### With Form [#with-form]

<ComponentPreview name="card-with-form">
  <div className="py-8 w-full max-w-sm mx-auto">
    <Card className="w-[350px]">
      <CardHeader>
        <CardTitle>
          Create Project
        </CardTitle>

        <CardDescription>
          Deploy your new project in one-click.
        </CardDescription>
      </CardHeader>

      <CardContent>
        <form>
          <div className="grid w-full items-center gap-4">
            <div className="flex flex-col space-y-1.5">
              <Label htmlFor="name">
                Name
              </Label>

              <Input id="name" placeholder="Name of your project" />
            </div>

            <div className="flex flex-col space-y-1.5">
              <Label htmlFor="framework">
                Framework
              </Label>

              <Input id="framework" placeholder="Next.js" />
            </div>
          </div>
        </form>
      </CardContent>

      <CardFooter className="flex justify-between border-t pt-6">
        <Button variant="outline">
          Cancel
        </Button>

        <Button>
          Deploy
        </Button>
      </CardFooter>
    </Card>
  </div>
</ComponentPreview>

### Stats [#stats]

<ComponentPreview name="card-stats">
  <div className="py-8 w-full max-w-sm mx-auto">
    <Card className="w-[300px]">
      <CardHeader className="flex flex-row items-center justify-between pb-2 border-b-0">
        <CardTitle className="text-sm font-medium text-muted-foreground">
          Total Revenue
        </CardTitle>

        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" className="size-4 text-muted-foreground">
          <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
        </svg>
      </CardHeader>

      <CardContent>
        <div className="text-2xl font-bold">
          $45,231.89
        </div>

        <div className="text-xs text-muted-foreground flex items-center gap-1 mt-1">
          <span className="text-emerald-500 flex items-center">
            <ArrowUpRight className="size-3 mr-1" />

            {"+20.1%"}
          </span>

          {"from last month"}
        </div>
      </CardContent>
    </Card>
  </div>
</ComponentPreview>

### With Action [#with-action]

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

<ComponentPreview name="card-with-action">
  <div className="py-8 w-full max-w-sm mx-auto">
    <Card className="w-[350px]">
      <CardHeader>
        <CardTitle>
          Team Members
        </CardTitle>

        <CardDescription>
          Manage your team settings.
        </CardDescription>

        <CardAction>
          <Button variant="ghost" size="icon">
            <MoreHorizontal />
          </Button>
        </CardAction>
      </CardHeader>

      <CardContent>
        <div className="flex items-center justify-between space-x-4">
          <div className="flex items-center space-x-4">
            <div className="size-10 rounded-full bg-muted border" />

            <div>
              <div className="text-sm font-medium leading-none">
                Sofia Davis
              </div>

              <div className="text-sm text-muted-foreground">
                {"m@example.com"}
              </div>
            </div>
          </div>

          <Button variant="outline" size="sm">
            Admin
          </Button>
        </div>
      </CardContent>
    </Card>
  </div>
</ComponentPreview>

## API Reference [#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.                             |