MCard

Cards

About

A simple container card with configurable padding, elevation shadow, and element tag, ported from the Millai UI Vue library's MCard component.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds MCard to your project and fits it to your theme.

Code

How MCard is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import MCard from "@/components/ui/mcard";

export default function MCardElevatedDemo() {
  return (
    <div className="w-full max-w-sm p-6">
      <MCard elevated as="section" padding="large">
        <h3 style={{ margin: 0, fontWeight: 600 }}>Storage Usage</h3>
        <p style={{ marginTop: 8, marginBottom: 0 }}>
          18.4 GB of 50 GB used across your workspace.
        </p>
      </MCard>
    </div>
  );
}