Styling

Guide.js ships with a single stylesheet at guide.js/styles.css. Import it once and customize from there.

Override with class selectors

Every rendered element has a guide-* class. Target them directly:

.guide-popover {
  box-shadow: 0 8px 24px rgb(0 0 0 / 8%);
}

.guide-popover-title {
  font-weight: 700;
}

.guide-button-primary {
  background: linear-gradient(90deg, #4f46e5, #7c3aed);
}

Per-step theme overrides

Each step can override theme tokens via configuration.theme:

configuration: {
  type: "pointer",
  // ...
  theme: {
    overrideTheme: true,
    backgroundColor: "#0b0e14",
    textColor: "#e5e7eb",
    brandColor: "#7c3aed",
    borderColor: "#1f2937",
    borderRadius: 12,
    nextButtonColor: "#7c3aed",
    nextButtonTextColor: "#ffffff",
    padding: { top: 20, right: 20, bottom: 20, left: 20 },
  },
}

Tour-wide theme

Set configuration.theme on the tour itself to apply a theme across every step:

const tour: TourInterface = {
  id: "welcome-tour",
  title: "Welcome",
  steps,
  configuration: {
    theme: {
      overrideTheme: true,
      brandColor: "#0ea5e9",
      borderRadius: 10,
    },
  },
};

Custom CSS per step

For one-off overrides, use customCss on a step’s theme:

theme: {
  customCss: `
    .guide-popover-title { letter-spacing: -0.02em; }
  `,
}