MiComponents/Documentation

Card

A container component for organizing content with optional header, footer, and sections.

Installation

npx micomponents-cli add card

Preview

Card Title

Card description

Your content goes here

Usage

Import

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "@/components/ui/card";

Basic Usage

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card description</CardDescription>
  </CardHeader>
  <CardContent>
    Your content goes here
  </CardContent>
</Card>

With Footer

Cards with footer section for actions.

Confirm Action

Are you sure you want to proceed?

This action cannot be undone.

User Profile Card

Display user information in a structured card layout.

User Profile

View your profile information

user@example.com

Role

Administrator

API Reference

Prop	Type	Default	Description
Card	React.HTMLAttributes<HTMLDivElement>	-	Main card container component
CardHeader	React.HTMLAttributes<HTMLDivElement>	-	Header section with padding and spacing
CardTitle	React.HTMLAttributes<HTMLDivElement>	-	Bold title text with bottom border
CardDescription	React.HTMLAttributes<HTMLDivElement>	-	Muted description text
CardContent	React.HTMLAttributes<HTMLDivElement>	-	Main content area with padding
CardFooter	React.HTMLAttributes<HTMLDivElement>	-	Footer section with border and justified layout