Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/CspmIT/mas-agua-front/llms.txt

Use this file to discover all available pages before exploring further.

​
Overview

CardCustom is a wrapper component built on Material-UI’s Box component that provides a consistent card container with shadow styling and dark mode support. It’s designed to be used as a container for content sections throughout the application.

​
Import

import CardCustom from '@/components/CardCustom';

​
Material-UI Integration

This component wraps Material-UI’s Box component and inherits all of its properties and behaviors. 
import { Box } from "@mui/material";

​
Props

​
children
ReactNode
required
The content to be rendered inside the card container
​
className
string
Additional CSS classes to apply to the card. These classes are appended to the default styling

​
Default Styling

The component applies the following classes by default:
  • bg-white - White background in light mode
  • dark:bg-zinc-700 - Zinc-700 background in dark mode
  • shadow-[2px_3px_5px_0px_#0000001f] - Custom shadow (2px horizontal, 3px vertical, 5px blur, 0px spread, with 12% opacity black)

​
Usage Examples

​
Basic Card

<CardCustom>
  <h2>Card Title</h2>
  <p>Card content goes here</p>
</CardCustom>

​
Card with Custom Padding

<CardCustom className="p-6">
  <h2 className="text-xl font-bold mb-4">Dashboard Summary</h2>
  <div className="space-y-2">
    <p>Total Users: 1,234</p>
    <p>Active Sessions: 56</p>
  </div>
</CardCustom>

​
Card with Border Radius

<CardCustom className="rounded-lg p-4">
  <h3 className="font-semibold">Notification</h3>
  <p className="text-sm text-gray-600 dark:text-gray-300">
    Your profile has been updated successfully.
  </p>
</CardCustom>

​
Nested Cards Layout

<div className="grid grid-cols-2 gap-4">
  <CardCustom className="p-6">
    <h3 className="text-lg font-bold mb-2">Card 1</h3>
    <p>Content for first card</p>
  </CardCustom>
  
  <CardCustom className="p-6">
    <h3 className="text-lg font-bold mb-2">Card 2</h3>
    <p>Content for second card</p>
  </CardCustom>
</div>

​
Card as Form Container

<CardCustom className="max-w-md mx-auto p-8 rounded-xl">
  <h2 className="text-2xl font-bold mb-6">Login</h2>
  <form>
    <input 
      type="email" 
      placeholder="Email" 
      className="w-full mb-4 p-2 border rounded"
    />
    <input 
      type="password" 
      placeholder="Password" 
      className="w-full mb-4 p-2 border rounded"
    />
    <button className="w-full bg-blue-500 text-white py-2 rounded">
      Sign In
    </button>
  </form>
</CardCustom>

​
Card with Custom Background

<CardCustom className="bg-gradient-to-r from-blue-500 to-purple-600 text-white p-8">
  <h2 className="text-2xl font-bold">Featured Content</h2>
  <p className="mt-2">Special announcement or highlighted information</p>
</CardCustom>

​
Dark Mode Support

The component automatically adapts to dark mode using Tailwind’s dark mode classes:
  • Light mode: White background (bg-white)
  • Dark mode: Zinc-700 background (dark:bg-zinc-700)
Ensure your Tailwind configuration has dark mode enabled: 
// tailwind.config.js
module.exports = {
  darkMode: 'class', // or 'media'
  // ...
}

​
Source Location

/src/components/CardCustom/index.jsx

​
Notes

  • Built on Material-UI’s Box component, inheriting its flexibility and props
  • Uses Tailwind CSS for styling with dark mode support
  • Custom shadow value provides subtle depth to cards
  • Additional classes can be passed to extend or override default styling
  • The ?? nullish coalescing operator ensures empty string if className is null/undefined

Build docs developers (and LLMs) love

Get started for freeTalk to us