Customization Basics

This guide will help you customize SaaSKit to match your brand identity and requirements.

Color Customization

Primary Colors

Update colors in tailwind.config.mjs:

theme: {
  extend: {
    colors: {
      primary: {
        50: '#f0f9ff',
        100: '#e0f2fe',
        // ... add your color scale
        900: '#0c4a6e',
      },
      accent: {
        teal: '#055e68',
        green: '#62a388',
        // ... your accent colors
      },
    },
  },
}

Using Colors

Apply colors in components:

<div className="bg-primary-500 text-white">
  <button className="bg-accent-teal hover:bg-accent-green">
    Click me
  </button>
</div>

Typography

Font Configuration

Update fonts in tailwind.config.mjs:

theme: {
  extend: {
    fontFamily: {
      sans: ['Inter', 'system-ui', 'sans-serif'],
      display: ['Poppins', 'sans-serif'],
      mono: ['Fira Code', 'monospace'],
    },
  },
}

Font Loading

Add fonts in src/layouts/BaseLayout.astro:

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet" />

Logo and Branding

Adding Your Logo

1. Place logo files in public/ directory:

   • logo.svg - Main logo
   • logo-dark.svg - Dark mode logo
   • favicon.svg - Favicon

2. Update Header component:

<img 
  src="/logo.svg" 
  alt="Your Brand"
  class="h-8 w-auto"
/>

Component Customization

Modifying Components

1. Direct Edit - Edit component files directly
2. Props - Add props for customization
3. Composition - Combine components

Example: Custom Button

interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'outline';
  size?: 'sm' | 'md' | 'lg';
  children: React.ReactNode;
}

export default function Button({ 
  variant = 'primary', 
  size = 'md',
  children 
}: ButtonProps) {
  const baseClasses = 'font-semibold rounded-lg transition-colors';
  const variantClasses = {
    primary: 'bg-primary-500 text-white hover:bg-primary-600',
    secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300',
    outline: 'border-2 border-primary-500 text-primary-500 hover:bg-primary-50',
  };
  const sizeClasses = {
    sm: 'px-3 py-1.5 text-sm',
    md: 'px-4 py-2',
    lg: 'px-6 py-3 text-lg',
  };

  return (
    <button className={`${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]}`}>
      {children}
    </button>
  );
}

Layout Customization

Container Widths

Adjust max-width in components:

<div className="container mx-auto px-4 max-w-7xl">
  {/* Content */}
</div>

Spacing

Use Tailwind spacing utilities:

<section className="py-20 md:py-32">
  <div className="space-y-8">
    {/* Content */}
  </div>
</section>

Dark Mode Customization

Custom Dark Mode Colors

.dark {
  --color-bg: #0f172a;
  --color-text: #f1f5f9;
}

Component Dark Mode

<div className="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
  {/* Content */}
</div>

Content Customization

Updating Text

1. Pages - Edit .astro files in src/pages/
2. Components - Update component text
3. Content Collections - Edit markdown files

Adding Images

1. Place images in public/images/
2. Reference in components:

<img src="/images/feature.jpg" alt="Feature" />

Advanced Customization

Custom CSS

Add custom styles in src/styles/global.css:

@layer components {
  .custom-gradient {
    @apply bg-gradient-to-r from-purple-500 to-pink-500;
  }
}

JavaScript Functionality

Add client-side scripts:

<script>
  // Your custom JavaScript
  document.addEventListener('DOMContentLoaded', () => {
    // Initialize
  });
</script>

Customization Checklist

• Update brand colors
• Add your logo
• Customize typography
• Update content and copy
• Add your images
• Configure dark mode
• Customize components
• Test responsiveness
• Verify accessibility

Next Steps

• Advanced Customization - Deep dive into customization
• Styling Guide - Master Tailwind CSS
• Component Reference - Explore all components

Start customizing! Make SaaSKit your own. 🎨