Customize User Tour Kit appearance with CSS custom properties for colors, spacing, border radius, and shadow values

CSS Variables

TourKit exposes CSS variables for easy theming without modifying component code.

Available Variables

Card Variables

:root {
  --tour-kit-card-bg: var(--popover);
  --tour-kit-card-fg: var(--popover-foreground);
  --tour-kit-card-border: var(--border);
  --tour-kit-card-radius: 0.5rem;
  --tour-kit-card-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  --tour-kit-card-padding: 1rem;
}

Spotlight Variables

:root {
  --tour-kit-spotlight-color: rgba(0, 0, 0, 0.5);
  --tour-kit-spotlight-padding: 8px;
  --tour-kit-spotlight-radius: 4px;
  --tour-kit-spotlight-transition: all 200ms ease;
}

Button Variables

:root {
  --tour-kit-button-bg: var(--primary);
  --tour-kit-button-fg: var(--primary-foreground);
  --tour-kit-button-hover: var(--primary) / 0.9;
  --tour-kit-button-radius: 0.375rem;
  --tour-kit-button-padding: 0.5rem 1rem;
}

Progress Variables

:root {
  --tour-kit-progress-bg: var(--muted);
  --tour-kit-progress-fg: var(--primary);
  --tour-kit-progress-dot-size: 8px;
  --tour-kit-progress-bar-height: 4px;
}

Dark Mode

Override variables for dark mode:

.dark {
  --tour-kit-card-bg: hsl(220 20% 10%);
  --tour-kit-card-border: hsl(220 20% 20%);
  --tour-kit-spotlight-color: rgba(0, 0, 0, 0.7);
}

Custom Theme Example

/* Brand theme */
:root {
  --tour-kit-card-bg: #ffffff;
  --tour-kit-card-border: #e5e7eb;
  --tour-kit-button-bg: #6366f1;
  --tour-kit-button-fg: #ffffff;
  --tour-kit-spotlight-color: rgba(99, 102, 241, 0.3);
}

.dark {
  --tour-kit-card-bg: #1f2937;
  --tour-kit-card-border: #374151;
  --tour-kit-button-bg: #818cf8;
  --tour-kit-spotlight-color: rgba(129, 140, 248, 0.2);
}

Per-Component Variables

Scope variables to specific components:

/* Only affect TourCard */
[data-tour-card] {
  --tour-kit-card-radius: 1rem;
  --tour-kit-card-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

/* Only affect overlay */
[data-tour-overlay] {
  --tour-kit-spotlight-color: rgba(0, 0, 50, 0.6);
}

Dynamic Theming

Change variables with JavaScript:

function setTourTheme(theme: 'light' | 'dark' | 'brand') {
  const root = document.documentElement;

  if (theme === 'brand') {
    root.style.setProperty('--tour-kit-button-bg', '#6366f1');
    root.style.setProperty('--tour-kit-spotlight-color', 'rgba(99, 102, 241, 0.3)');
  }
}

Integration with CSS-in-JS

import { styled } from 'styled-components';

const StyledTourCard = styled(TourCard)`
  --tour-kit-card-bg: ${props => props.theme.cardBg};
  --tour-kit-card-border: ${props => props.theme.cardBorder};
`;

Resetting Variables

Reset to defaults:

[data-tour-kit] {
  --tour-kit-card-bg: initial;
  --tour-kit-card-border: initial;
}

CSS Variables

On this page