Display

Card

Container with header, content, and footer slots.

Available inreactangular

Preview

Live previewreal component

github-mcp

OAuth-secured MCP server with 12 tools

Read repositories, search code, manage issues, and open pull requests through the GitHub MCP server.

Install

TerminalBash

$ npx @mcp-elements/cli add card

Usage

card-example.tsxTSX

import { Card, CardHeader, CardTitle, CardContent, CardFooter } from '@mcp-elements/react'

export function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
      </CardHeader>
      <CardContent>
        <p>Card body content goes here.</p>
      </CardContent>
      <CardFooter>
        <button>Action</button>
      </CardFooter>
    </Card>
  )
}

Props

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes to apply to the card
`children`	`React.ReactNode`	—	Card content (use CardHeader, CardContent, CardFooter)