> ## Documentation Index
> Fetch the complete documentation index at: https://docs.devreadykit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Theming

> Customize the appearance of DevReady Kit components

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:

```tsx theme={null}
<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:

```js theme={null}
// 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:

```css theme={null}
: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);
}
```

```tsx theme={null}
<div className="custom-theme">
  <Button variant="filled" color="primary">
    Themed Button
  </Button>
</div>
```

## Method 4: Wrapper Components

Create wrapper components with your design tokens:

```tsx theme={null}
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

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

### Inputs

```tsx theme={null}
// 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

```tsx theme={null}
// 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

```tsx theme={null}
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

```tsx theme={null}
// 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}
    />
  );
};
```