Express CSV Logo

Styling

Pass styling and presentation options to the CSVImporter constructor when you create the importer instance.

Theme Example

import { CSVImporter, x, type ECSVTheme } from "@expresscsv/sdk";

const schema = x.row({
  email: x.string().email().label("Email"),
});

const theme: ECSVTheme = {
  modes: {
    light: {
      primary: "#4F46E5",
      background: "#ffffff",
      foreground: "#0f172a",
    },
    dark: {
      primary: "#a5b4fc",
      background: "#09090b",
      foreground: "#fafafa",
    },
  },
};

const importer = new CSVImporter({
  schema,
  publishableKey: "your-publishable-key",
  importIdentifier: "user-import",
  theme,
  colorMode: "system",
});

Custom CSS

const importer = new CSVImporter({
  schema,
  publishableKey: "your-publishable-key",
  importIdentifier: "user-import",
  customCSS: `
    .ecsv [data-step="upload"] {
      border-radius: 1rem;
    }

    .ecsv button {
      font-weight: 600;
    }
  `,
});

Custom Fonts

const importer = new CSVImporter({
  schema,
  publishableKey: "your-publishable-key",
  importIdentifier: "user-import",
  fonts: {
    title: { source: "google", name: "Space Grotesk", weights: [400, 600, 700] },
    body: { source: "custom", url: "https://example.com/font.woff2", format: "woff2" },
  },
});

Other Useful UI Options

  • stepDisplay
  • disableStatusStep

For more detail on constructor options and runtime control, see API.