Skip to main content
DevReady Kit uses composable props and Tailwind classes for theming. You can customize the appearance of components in several ways:

​
Method 1: Passing className

The simplest way to customize components is by passing a className prop: 
<Button className="bg-indigo-600 hover:bg-indigo-700 text-white">
  Custom Button
</Button>

<Input 
  className="border-2 border-blue-500 focus:border-blue-700"
  placeholder="Custom styled input"
/>

​
Method 2: Extending Tailwind Config

Customize the design system by extending your Tailwind configuration: 
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#3B82F6',
          70: '#2563EB',
          90: '#DBEAFE',
        },
        success: {
          50: '#10B981',
          90: '#D1FAE5',
        }
      },
      borderRadius: {
        'custom': '12px',
      },
      spacing: {
        'custom': '1.5rem',
      }
    },
  },
}

​
Method 3: CSS Variables

Override component styles using CSS variables: 
:root {
  --primary-color: #your-brand-color;
  --primary-hover: #your-hover-color;
  --border-radius: 8px;
}

.custom-theme {
  --primary-50: var(--primary-color);
  --primary-70: var(--primary-hover);
}

<div className="custom-theme">
  <Button variant="filled" color="primary">
    Themed Button
  </Button>
</div>

​
Method 4: Wrapper Components

Create wrapper components with your design tokens: 
import { Button as BaseButton } from '@peppermint-design/devreadykit';

const ThemedButton = ({ className, ...props }) => (
  <BaseButton 
    className={`bg-brand-primary hover:bg-brand-secondary text-white ${className}`}
    {...props}
  />
);

// Usage
<ThemedButton>Brand Button</ThemedButton>

​
Component-Specific Theming

​
Buttons

// Custom color scheme
<Button 
  className="bg-gradient-to-r from-purple-500 to-pink-500 text-white border-0"
>
  Gradient Button
</Button>

​
Inputs

// Custom focus states
<Input 
  className="border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
  placeholder="Custom focus style"
/>

​
Cards and Containers

// Custom shadows and borders
<div className="bg-white rounded-lg shadow-lg border border-gray-200 p-6">
  <h3>Custom Card</h3>
  <p>Content with custom styling</p>
</div>

​
Best Practices

  1. Consistency: Use a consistent color palette across your application
  2. Accessibility: Ensure sufficient contrast ratios for text and backgrounds
  3. Performance: Avoid overly complex CSS that might impact performance
  4. Maintainability: Use design tokens or CSS variables for easy updates

​
Examples

​
Brand Colors

const brandColors = {
  primary: 'bg-blue-600 hover:bg-blue-700',
  secondary: 'bg-gray-600 hover:bg-gray-700',
  success: 'bg-green-600 hover:bg-green-700',
};

<Button className={`${brandColors.primary} text-white`}>
  Primary Action
</Button>

​
Custom Component Library

// Create your own component variants
const CustomButton = ({ variant = 'default', ...props }) => {
  const variants = {
    default: 'bg-blue-600 hover:bg-blue-700 text-white',
    outline: 'border-2 border-blue-600 text-blue-600 hover:bg-blue-50',
    ghost: 'text-blue-600 hover:bg-blue-50',
  };
  
  return (
    <BaseButton 
      className={variants[variant]}
      {...props}
    />
  );
};
⌘I