Styling Example

import { CSVImporter } from '@importcsv/react';
import { z } from 'zod';

const schema = z.object({
  name: z.string().min(1),
  email: z.string().email()
});

<CSVImporter
  darkMode={true}
  schema={schema}
  onComplete={(data) => console.log(data)}
/>

import { CSVImporter } from '@importcsv/react';
import { z } from 'zod';

const schema = z.object({
  name: z.string().min(1),
  email: z.string().email(),
  company: z.string()
});

<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'
  }}
  schema={schema}
  onComplete={(data) => console.log(data)}
/>

import { CSVImporter } from '@importcsv/react';
import { z } from 'zod';

const schema = z.object({
  name: z.string().min(1),
  email: z.string().email()
});

<div style={{ height: '600px', border: '1px solid #E5E7EB' }}>
  <CSVImporter
    isModal={false}
    schema={schema}
    onComplete={(data) => console.log(data)}
  />
</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'
}}

import { CSVImporter } from '@importcsv/react';
import { z } from 'zod';

const schema = z.object({
  name: z.string(),
  email: z.string().email()
});

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}
  schema={schema}
  onComplete={(data) => console.log(data)}
/>