Instruction file imported from archeryfox/dogpad (.cursor/rules/mui-components.mdc). Copyright stays with the author.

globs: .tsx,.ts description: Material-UI component usage rules

Material-UI Component Rules

Component Usage

• Always use MUI components as base, wrap with custom logic
• Use MUI theme system for consistent styling
• Prefer MUI's built-in variants over custom CSS
• Use sx prop for styling instead of className when possible

Component Structure

import React from 'react';
import { ComponentName, ComponentProps } from '@mui/material';

export interface CustomComponentProps extends ComponentProps {
  // Custom props
}

const CustomComponent: React.FC<CustomComponentProps> = ({
  // Destructure props
  ...props
}) => {
  return (
    <ComponentName {...props}>
      {/* Content */}
    </ComponentName>
  );
};

Animation Integration

• Use Framer Motion for complex animations
• Wrap MUI components with motion.div for animations
• Keep animations subtle and performant

Theme Integration

• Use theme.palette for colors
• Use theme.typography for text styles
• Use theme.spacing for consistent spacing
• Use theme.breakpoints for responsive design

Accessibility

• Always provide proper ARIA labels
• Use semantic HTML elements
• Ensure keyboard navigation works
• Test with screen readers