CardCustom

Overview

The CardCustom component is a simple, flexible container component built on Material-UI’s Box that provides consistent card styling across the application. It supports dark mode and custom styling through className props.

Import

import CardCustom from '../../../components/CardCustom'

Props

children

ReactNode

required

The content to be rendered inside the card container.

className

string

Additional CSS classes to customize the card appearance. Merged with default styling.

className="p-4 rounded-lg border-2 border-blue-500"

Default Styling

The component applies the following default styles:

bg-white - White background in light mode
dark:bg-zinc-700 - Dark zinc background in dark mode
shadow-[2px_3px_5px_0px_#0000001f] - Custom shadow effect

Usage Examples

Basic Card

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

Card with Custom Styling

<CardCustom className="p-4 rounded-lg">
  <Typography variant="h6">Configuration Panel</Typography>
  <TextField label="Setting" />
</CardCustom>

Filter Card (from ChartsTable.jsx)

<CardCustom className="p-2 my-2 rounded-md bg-grey-100">
  <form onSubmit={handleSubmit(onSubmit)}>
    <FormControl fullWidth>
      <InputLabel>Tipo</InputLabel>
      <Select>
        <MenuItem value="">Todos</MenuItem>
        {/* More options */}
      </Select>
    </FormControl>
    
    <Button type="submit" variant="contained">
      Filtrar
    </Button>
  </form>
</CardCustom>

Nested Configuration Card

<CardCustom className="p-2 !bg-slate-50 border-2 border-slate-100 rounded-md shadow-sm">
  <FormControlLabel
    control={<Checkbox checked={enabled} onChange={handleToggle} />}
    label="Mostrar variable secundaria"
  />
  
  {enabled && (
    <div className="!bg-white">
      <SelectVars label="Variable secundaria" />
    </div>
  )}
</CardCustom>

Content Wrapper Card

<CardCustom className="p-6">
  <div className="flex flex-col gap-4">
    <Typography variant="h5">Dashboard Settings</Typography>
    <Divider />
    <TextField label="Dashboard Name" fullWidth />
    <TextField label="Description" fullWidth multiline rows={3} />
  </div>
</CardCustom>

Common Use Cases

Form Container
Filter Panel
Information Display
Collapsible Section

import CardCustom from '../../../components/CardCustom'
import { TextField, Button } from '@mui/material'

function ConfigForm() {
  return (
    <CardCustom className="p-4 rounded-lg">
      <form className="flex flex-col gap-3">
        <TextField label="Name" fullWidth />
        <TextField label="Value" fullWidth />
        <Button variant="contained" type="submit">
          Save
        </Button>
      </form>
    </CardCustom>
  )
}

import CardCustom from '../../../components/CardCustom'
import { Select, MenuItem, FormControl } from '@mui/material'

function FilterPanel() {
  return (
    <CardCustom className="p-2 my-2 rounded-md">
      <div className="flex gap-2">
        <FormControl size="small">
          <Select>
            <MenuItem value="all">Todos</MenuItem>
            <MenuItem value="active">Activos</MenuItem>
          </Select>
        </FormControl>
        
        <Button variant="contained" size="small">
          Filtrar
        </Button>
      </div>
    </CardCustom>
  )
}

import CardCustom from '../../../components/CardCustom'

function InfoCard({ title, value, unit }) {
  return (
    <CardCustom className="p-4 rounded-lg">
      <h3 className="text-sm text-gray-600">{title}</h3>
      <div className="flex items-baseline gap-1">
        <span className="text-2xl font-bold">{value}</span>
        <span className="text-sm text-gray-500">{unit}</span>
      </div>
    </CardCustom>
  )
}

import CardCustom from '../../../components/CardCustom'
import { useState } from 'react'
import { Checkbox, FormControlLabel } from '@mui/material'

function CollapsibleConfig() {
  const [enabled, setEnabled] = useState(false)

  return (
    <CardCustom className="p-2 !bg-slate-50 border-2 border-slate-100 rounded-md shadow-sm">
      <FormControlLabel
        control={
          <Checkbox 
            checked={enabled} 
            onChange={(e) => setEnabled(e.target.checked)} 
          />
        }
        label="Enable Advanced Options"
      />
      
      {enabled && (
        <div className="!bg-white mt-2 p-3 rounded">
          {/* Advanced configuration options */}
        </div>
      )}
    </CardCustom>
  )
}

Component Source

Location: ~/workspace/source/src/components/CardCustom/index.jsx

Dark Mode Support

The component automatically adapts to dark mode:

// Light mode: white background
// Dark mode: zinc-700 background

<CardCustom>
  <p>This card adapts to the current theme</p>
</CardCustom>

CardCustom uses Material-UI’s Box component as its foundation, inheriting all Box capabilities including the sx prop for advanced styling if needed.

Styling Tips

Override Background Color

Use the !important flag when overriding default colors:

<CardCustom className="!bg-slate-50">
  {/* Content */}
</CardCustom>

Add Borders

<CardCustom className="border-2 border-slate-200 rounded-md">
  {/* Content */}
</CardCustom>

Adjust Padding

<CardCustom className="p-6">
  {/* More padding */}
</CardCustom>

<CardCustom className="p-2">
  {/* Less padding */}
</CardCustom>

Responsive Spacing

<CardCustom className="p-2 md:p-4 lg:p-6">
  {/* Responsive padding that increases with screen size */}
</CardCustom>

Best Practices

Consistent Spacing: Use Tailwind spacing classes for consistent padding/margin
Semantic Grouping: Group related content within cards
Nested Cards: Use different background colors for nested cards to create visual hierarchy
Responsive Design: Adjust card padding and layout for different screen sizes
Accessibility: Ensure sufficient contrast between card background and content

Integration with Material-UI

CardCustom wraps Material-UI’s Box component, so you can use all Material-UI theming features:

import { useTheme } from '@mui/material'

function ThemedCard() {
  const theme = useTheme()
  
  return (
    <CardCustom 
      className="p-4"
      sx={{ 
        borderLeft: `4px solid ${theme.palette.primary.main}` 
      }}
    >
      {/* Content */}
    </CardCustom>
  )
}

Chart Types

UI Components

Overview

Import

Props

Default Styling

Usage Examples

Basic Card

Card with Custom Styling

Filter Card (from ChartsTable.jsx)

Nested Configuration Card

Content Wrapper Card

Common Use Cases

Component Source

Dark Mode Support

Styling Tips

Override Background Color

Add Borders

Adjust Padding

Responsive Spacing

Best Practices

Integration with Material-UI

Build docs developers (and LLMs) love

Chart Types

UI Components

Documentation Index

​Overview

​Import

​Props

​Default Styling

​Usage Examples

​Basic Card

​Card with Custom Styling

​Filter Card (from ChartsTable.jsx)

​Nested Configuration Card

​Content Wrapper Card

​Common Use Cases

​Component Source

​Dark Mode Support

​Styling Tips

​Override Background Color

​Add Borders

​Adjust Padding

​Responsive Spacing

​Best Practices

​Integration with Material-UI

Build docs developers (and LLMs) love

Overview

Import

Props

Default Styling

Usage Examples

Basic Card

Card with Custom Styling

Filter Card (from ChartsTable.jsx)

Nested Configuration Card

Content Wrapper Card

Common Use Cases

Component Source

Dark Mode Support

Styling Tips

Override Background Color

Add Borders

Adjust Padding

Responsive Spacing

Best Practices

Integration with Material-UI