Styling Example

<CSVImporter
  darkMode={true}
  columns={columns}
  onComplete={handleComplete}
/>

<CSVImporter
  primaryColor="#8B5CF6"
  customStyles={{
    'font-family': 'Inter, system-ui, sans-serif',
    'font-size': '14px',
    'border-radius': '12px',
    'color-primary': '#8B5CF6',
    'color-primary-hover': '#7C3AED',
    'color-border': '#E5E7EB',
    'color-text': '#1F2937',
    'color-background': '#FFFFFF',
    'color-background-modal': '#F9FAFB'
  }}
  columns={columns}
  onComplete={handleComplete}
/>

<div style={{ height: '600px', border: '1px solid #E5E7EB' }}>
  <CSVImporter
    isModal={false}
    columns={columns}
    onComplete={handleComplete}
  />
</div>

// Stripe-like
customStyles={{
  'color-primary': '#635BFF',
  'border-radius': '8px'
}}

// Shopify-like
customStyles={{
  'color-primary': '#008060',
  'border-radius': '4px'
}}

// Tailwind Blue
customStyles={{
  'color-primary': '#3B82F6',
  'border-radius': '6px'
}}

const customTheme = {
  // Typography
  'font-family': '"SF Pro Display", -apple-system, sans-serif',
  'font-size': '15px',
  'base-spacing': '1.5rem',
  
  // Shape
  'border-radius': '16px',
  
  // Colors
  'color-primary': '#FF6B6B',
  'color-primary-hover': '#FF5252',
  'color-secondary': '#4ECDC4',
  'color-secondary-hover': '#38B2A9',
  'color-tertiary': '#45B7D1',
  'color-tertiary-hover': '#36A2C2',
  
  // Neutral colors
  'color-border': '#DDD6FE',
  'color-text': '#1E293B',
  'color-text-soft': '#64748B',
  'color-text-on-primary': '#FFFFFF',
  'color-text-on-secondary': '#FFFFFF',
  
  // Backgrounds
  'color-background': '#FAFAF9',
  'color-background-modal': '#FFFFFF',
  'color-input-background': '#F8FAFC',
  'color-input-background-soft': '#F1F5F9',
  'color-background-menu-hover': '#F3F4F6',
  
  // Misc
  'color-importer-link': '#8B5CF6',
  'color-progress-bar': '#10B981'
};

<CSVImporter
  customStyles={customTheme}
  columns={columns}
  onComplete={handleComplete}
/>