Customization Guide

Modifying Components

All TonuComponent components are designed to be easily customized.

Method 1: Direct Class Modification

Simply change the Tailwind classes:

tsx

// Original
<button className="px-6 py-3 bg-blue-600 text-white rounded-lg">
  Click Me
</button>

// Customized
<button className="px-8 py-4 bg-purple-600 text-white rounded-full">
  Click Me
</button>

Method 2: Props

Add custom props to make components more flexible:

tsx

export function Button({ 
  children, 
  variant = 'primary',
  size = 'md',
  ...props 
}) {
  const baseStyles = 'font-medium rounded-lg transition-colors';
  
  const variants = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700',
    secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300',
  };
  
  const sizes = {
    sm: 'px-4 py-2 text-sm',
    md: 'px-6 py-3',
    lg: 'px-8 py-4 text-lg',
  };
  
  return (
    <button 
      className={`${baseStyles} ${variants[variant]} ${sizes[size]}`}
      {...props}
    >
      {children}
    </button>
  );
}

Method 3: CSS Variables

Use CSS variables for dynamic theming:

tsx

<button 
  className="px-6 py-3 rounded-lg"
  style={{
    backgroundColor: 'var(--color-primary)',
    color: 'white',
  }}
>
  Click Me
</button>

Using with Component Libraries

TonuComponent works alongside other libraries:

**Radix UI**: For accessible primitives

**Headless UI**: For unstyled components

**Framer Motion**: For animations

Example combining with Framer Motion:

tsx

import { motion } from 'framer-motion';

export function AnimatedButton({ children }) {
  return (
    <motion.button
      whileHover={{ scale: 1.05 }}
      whileTap={{ scale: 0.95 }}
      className="px-6 py-3 bg-blue-600 text-white rounded-lg"
    >
      {children}
    </motion.button>
  );
}

Best Practices

1. **Don't modify core files**: Copy components and customize copies

2. **Use consistent naming**: Follow your project's conventions

3. **Document changes**: Keep track of customizations

4. **Test thoroughly**: Ensure changes work across breakpoints and themes