0.2.0

Styles

Customize the tour appearance with CSS custom properties (variables).

Visual appearance is fully customizable through CSS custom properties defined on the .rb root element. Override any variable in your own stylesheet to change colors, sizes, spacing, and animations — no need to touch the library source or add extra build steps.

Container

VariableDefault
--rb-container-z-index10

Tour overlay

VariableDefault
--rb-tour-overlay-backgroundrgba(0, 0, 0, 0.45)
--rb-tour-overlay-z-index1000

Tour tooltip

VariableDefault
--rb-tour-tooltip-backgroundrgb(255, 255, 255)
--rb-tour-tooltip-border1px solid rgba(17, 17, 17, 0.06)
--rb-tour-tooltip-border-radius14px
--rb-tour-tooltip-shadow0 4px 16px rgba(0, 0, 0, 0.08)
--rb-tour-tooltip-z-index1010
--rb-tour-tooltip-max-widthcalc(100vw - 32px)
--rb-tour-tooltip-min-width-xs240px
--rb-tour-tooltip-min-width-sm280px
--rb-tour-tooltip-min-width-md340px
--rb-tour-tooltip-min-width-lg400px
--rb-tour-tooltip-min-width-xl460px
--rb-tour-tooltip-min-width-xxl520px
--rb-tour-tooltip-padding-xs10px
--rb-tour-tooltip-padding-sm12px
--rb-tour-tooltip-padding-md16px
--rb-tour-tooltip-padding-lg20px
--rb-tour-tooltip-padding-xl24px
--rb-tour-tooltip-padding-xxl28px
--rb-tour-tooltip-gap-xs10px
--rb-tour-tooltip-gap-sm12px
--rb-tour-tooltip-gap-md16px
--rb-tour-tooltip-gap-lg20px
--rb-tour-tooltip-gap-xl24px
--rb-tour-tooltip-gap-xxl28px
--rb-tour-tooltip-header-gap12px
--rb-tour-tooltip-close-offset-top-2px
--rb-tour-tooltip-close-offset-right-4px

Arrow

VariableDefault
--rb-tour-tooltip-arrow-size10px
--rb-tour-tooltip-arrow-inset16px
--rb-tour-tooltip-arrow-offset50%

Title

VariableDefault
--rb-tour-tooltip-title-colorrgba(17, 17, 17, 0.96)
--rb-tour-tooltip-title-font-weight600
--rb-tour-tooltip-title-line-height1.35
--rb-tour-tooltip-title-font-size-xs14px
--rb-tour-tooltip-title-font-size-sm15px
--rb-tour-tooltip-title-font-size-md16px
--rb-tour-tooltip-title-font-size-lg18px
--rb-tour-tooltip-title-font-size-xl20px
--rb-tour-tooltip-title-font-size-xxl22px

Description

VariableDefault
--rb-tour-tooltip-description-colorrgba(17, 17, 17, 0.62)
--rb-tour-tooltip-description-line-height1.5
--rb-tour-tooltip-description-font-size-xs12px
--rb-tour-tooltip-description-font-size-sm13px
--rb-tour-tooltip-description-font-size-md14px
--rb-tour-tooltip-description-font-size-lg15px
--rb-tour-tooltip-description-font-size-xl16px
--rb-tour-tooltip-description-font-size-xxl17px

Animation

VariableDefault
--rb-tour-tooltip-animation-duration200ms
--rb-tour-tooltip-animation-easingease-out
--rb-tour-tooltip-glide-duration300ms
--rb-tour-tooltip-glide-easingcubic-bezier(0.4, 0, 0.2, 1)

Tour progress

VariableDefault
--rb-tour-progress-dot-size6px
--rb-tour-progress-dot-gap6px
--rb-tour-progress-dot-border-radius50%
--rb-tour-progress-dot-colorrgba(17, 17, 17, 0.18)
--rb-tour-progress-dot-color-activergba(17, 17, 17, 0.9)
--rb-tour-progress-text-font-size12px
--rb-tour-progress-text-colorrgba(17, 17, 17, 0.55)
--rb-tour-progress-line-height6px
--rb-tour-progress-line-border-radius4px
--rb-tour-progress-line-track-colorrgba(17, 17, 17, 0.08)
--rb-tour-progress-line-progress-colorrgba(17, 17, 17, 0.9)

Tour buttons

VariableDefault
--rb-tour-buttons-gap8px
--rb-tour-buttons-padding-top6px

Tour skip

VariableDefault
--rb-tour-skip-gap8px
--rb-tour-skip-input-size15px
--rb-tour-skip-input-backgroundrgb(255, 255, 255)
--rb-tour-skip-input-border1px solid rgba(17, 17, 17, 0.3)
--rb-tour-skip-input-border-radius4px
--rb-tour-skip-input-check-colorrgb(255, 255, 255)
--rb-tour-skip-input-accentrgba(17, 17, 17, 0.9)
--rb-tour-skip-label-font-size13px
--rb-tour-skip-label-line-height1.4
--rb-tour-skip-label-colorrgba(17, 17, 17, 0.62)
--rb-tour-skip-label-color-hoverrgba(17, 17, 17, 0.9)

Button (shared)

Shared variables for button sizing and appearance across all button types.

VariableDefault
--rb-button-size-xs30px
--rb-button-size-sm34px
--rb-button-size-md38px
--rb-button-size-lg42px
--rb-button-size-xl46px
--rb-button-size-xxl50px
--rb-button-font-size-xs11px
--rb-button-font-size-sm12px
--rb-button-font-size-md13px
--rb-button-font-size-lg14px
--rb-button-font-size-xl15px
--rb-button-font-size-xxl16px
--rb-button-font-weight500
--rb-button-letter-spacing0.01em
--rb-button-padding-xs0px 8px
--rb-button-padding-sm0px 10px
--rb-button-padding-md0px 14px
--rb-button-padding-lg0px 18px
--rb-button-padding-xl0px 22px
--rb-button-padding-xxl0px 26px
--rb-button-gap-xs4px
--rb-button-gap-sm6px
--rb-button-gap-md8px
--rb-button-gap-lg10px
--rb-button-gap-xl12px
--rb-button-gap-xxl14px
--rb-button-colorrgb(255, 255, 255)
--rb-button-backgroundrgb(17, 17, 17)
--rb-button-background-hoverrgb(38, 38, 38)
--rb-button-border1px solid transparent
--rb-button-border-radius8px
--rb-button-transitionall 0.18s ease
--rb-button-focus-outline2px solid rgba(17, 17, 17, 0.35)
--rb-button-focus-outline-offset2px

Outlined variant

VariableDefault
--rb-button-outlined-colorrgb(17, 17, 17)
--rb-button-outlined-backgroundtransparent
--rb-button-outlined-background-hoverrgba(17, 17, 17, 0.06)
--rb-button-outlined-border1px solid rgba(17, 17, 17, 0.16)

Ghost variant

VariableDefault
--rb-button-ghost-colorrgba(17, 17, 17, 0.72)
--rb-button-ghost-backgroundtransparent
--rb-button-ghost-background-hoverrgba(17, 17, 17, 0.06)
--rb-button-ghost-border1px solid transparent

Text variant

VariableDefault
--rb-button-text-colorrgba(17, 17, 17, 0.72)
--rb-button-text-color-hoverrgb(17, 17, 17)

Close button

VariableDefault
--rb-close-button-size-xs22px
--rb-close-button-size-sm26px
--rb-close-button-size-md28px
--rb-close-button-size-lg32px
--rb-close-button-size-xl36px
--rb-close-button-size-xxl38px
--rb-close-button-icon-size-xs12px
--rb-close-button-icon-size-sm14px
--rb-close-button-icon-size-md16px
--rb-close-button-icon-size-lg18px
--rb-close-button-icon-size-xl20px
--rb-close-button-icon-size-xxl22px
--rb-close-button-colorrgba(17, 17, 17, 0.6)
--rb-close-button-color-hoverrgb(17, 17, 17)
--rb-close-button-backgroundtransparent
--rb-close-button-background-hoverrgba(17, 17, 17, 0.06)
--rb-close-button-background-pressedrgba(17, 17, 17, 0.1)
--rb-close-button-border-radius8px
--rb-close-button-transitionall 0.18s ease
--rb-close-button-z-index20

Image

VariableDefault
--rb-image-width100%
--rb-image-heightauto
--rb-image-border-radius10px
--rb-image-object-fitcover
--rb-image-object-positioncenter

Icons

VariableDefault
--rb-icon-size-xs22px
--rb-icon-size-sm24px
--rb-icon-size-md28px
--rb-icon-size-lg32px
--rb-icon-size-xl36px
--rb-icon-size-xxl40px
--rb-icon-colorrgb(255, 255, 255)

Full reference

All CSS custom properties with their default values:

.rb {
  /* Container */
  --rb-container-z-index: 10;

  /* Button (shared) */
  --rb-button-size-xs: 30px;
  --rb-button-size-sm: 34px;
  --rb-button-size-md: 38px;
  --rb-button-size-lg: 42px;
  --rb-button-size-xl: 46px;
  --rb-button-size-xxl: 50px;
  --rb-button-font-size-xs: 11px;
  --rb-button-font-size-sm: 12px;
  --rb-button-font-size-md: 13px;
  --rb-button-font-size-lg: 14px;
  --rb-button-font-size-xl: 15px;
  --rb-button-font-size-xxl: 16px;
  --rb-button-font-weight: 500;
  --rb-button-letter-spacing: 0.01em;
  --rb-button-padding-xs: 0px 8px;
  --rb-button-padding-sm: 0px 10px;
  --rb-button-padding-md: 0px 14px;
  --rb-button-padding-lg: 0px 18px;
  --rb-button-padding-xl: 0px 22px;
  --rb-button-padding-xxl: 0px 26px;
  --rb-button-gap-xs: 4px;
  --rb-button-gap-sm: 6px;
  --rb-button-gap-md: 8px;
  --rb-button-gap-lg: 10px;
  --rb-button-gap-xl: 12px;
  --rb-button-gap-xxl: 14px;
  --rb-button-color: rgb(255, 255, 255);
  --rb-button-background: rgb(17, 17, 17);
  --rb-button-background-hover: rgb(38, 38, 38);
  --rb-button-border: 1px solid transparent;
  --rb-button-border-radius: 8px;
  --rb-button-transition: all 0.18s ease;
  --rb-button-focus-outline: 2px solid rgba(17, 17, 17, 0.35);
  --rb-button-focus-outline-offset: 2px;
  --rb-button-outlined-color: rgb(17, 17, 17);
  --rb-button-outlined-background: transparent;
  --rb-button-outlined-background-hover: rgba(17, 17, 17, 0.06);
  --rb-button-outlined-border: 1px solid rgba(17, 17, 17, 0.16);
  --rb-button-ghost-color: rgba(17, 17, 17, 0.72);
  --rb-button-ghost-background: transparent;
  --rb-button-ghost-background-hover: rgba(17, 17, 17, 0.06);
  --rb-button-ghost-border: 1px solid transparent;
  --rb-button-text-color: rgba(17, 17, 17, 0.72);
  --rb-button-text-color-hover: rgb(17, 17, 17);

  /* Close button */
  --rb-close-button-size-xs: 22px;
  --rb-close-button-size-sm: 26px;
  --rb-close-button-size-md: 28px;
  --rb-close-button-size-lg: 32px;
  --rb-close-button-size-xl: 36px;
  --rb-close-button-size-xxl: 38px;
  --rb-close-button-icon-size-xs: 12px;
  --rb-close-button-icon-size-sm: 14px;
  --rb-close-button-icon-size-md: 16px;
  --rb-close-button-icon-size-lg: 18px;
  --rb-close-button-icon-size-xl: 20px;
  --rb-close-button-icon-size-xxl: 22px;
  --rb-close-button-color: rgba(17, 17, 17, 0.6);
  --rb-close-button-color-hover: rgb(17, 17, 17);
  --rb-close-button-background: transparent;
  --rb-close-button-background-hover: rgba(17, 17, 17, 0.06);
  --rb-close-button-background-pressed: rgba(17, 17, 17, 0.1);
  --rb-close-button-border-radius: 8px;
  --rb-close-button-transition: all 0.18s ease;
  --rb-close-button-z-index: 20;

  /* Icons */
  --rb-icon-size-xs: 22px;
  --rb-icon-size-sm: 24px;
  --rb-icon-size-md: 28px;
  --rb-icon-size-lg: 32px;
  --rb-icon-size-xl: 36px;
  --rb-icon-size-xxl: 40px;
  --rb-icon-color: rgb(255, 255, 255);

  /* Tour overlay */
  --rb-tour-overlay-background: rgba(0, 0, 0, 0.45);
  --rb-tour-overlay-z-index: 1000;

  /* Tour progress */
  --rb-tour-progress-dot-size: 6px;
  --rb-tour-progress-dot-gap: 6px;
  --rb-tour-progress-dot-border-radius: 50%;
  --rb-tour-progress-dot-color: rgba(17, 17, 17, 0.18);
  --rb-tour-progress-dot-color-active: rgba(17, 17, 17, 0.9);
  --rb-tour-progress-text-font-size: 12px;
  --rb-tour-progress-text-color: rgba(17, 17, 17, 0.55);
  --rb-tour-progress-line-height: 6px;
  --rb-tour-progress-line-border-radius: 4px;
  --rb-tour-progress-line-track-color: rgba(17, 17, 17, 0.08);
  --rb-tour-progress-line-progress-color: rgba(17, 17, 17, 0.9);

  /* Tour buttons */
  --rb-tour-buttons-gap: 8px;
  --rb-tour-buttons-padding-top: 6px;

  /* Tour skip */
  --rb-tour-skip-gap: 8px;
  --rb-tour-skip-input-size: 15px;
  --rb-tour-skip-input-background: rgb(255, 255, 255);
  --rb-tour-skip-input-border: 1px solid rgba(17, 17, 17, 0.3);
  --rb-tour-skip-input-border-radius: 4px;
  --rb-tour-skip-input-check-color: rgb(255, 255, 255);
  --rb-tour-skip-input-accent: rgba(17, 17, 17, 0.9);
  --rb-tour-skip-label-font-size: 13px;
  --rb-tour-skip-label-line-height: 1.4;
  --rb-tour-skip-label-color: rgba(17, 17, 17, 0.62);
  --rb-tour-skip-label-color-hover: rgba(17, 17, 17, 0.9);

  /* Tour tooltip */
  --rb-tour-tooltip-arrow-size: 10px;
  --rb-tour-tooltip-arrow-inset: 16px;
  --rb-tour-tooltip-arrow-offset: 50%;
  --rb-tour-tooltip-gap-xs: 10px;
  --rb-tour-tooltip-gap-sm: 12px;
  --rb-tour-tooltip-gap-md: 16px;
  --rb-tour-tooltip-gap-lg: 20px;
  --rb-tour-tooltip-gap-xl: 24px;
  --rb-tour-tooltip-gap-xxl: 28px;
  --rb-tour-tooltip-header-gap: 12px;
  --rb-tour-tooltip-min-width-xs: 240px;
  --rb-tour-tooltip-min-width-sm: 280px;
  --rb-tour-tooltip-min-width-md: 340px;
  --rb-tour-tooltip-min-width-lg: 400px;
  --rb-tour-tooltip-min-width-xl: 460px;
  --rb-tour-tooltip-min-width-xxl: 520px;
  --rb-tour-tooltip-max-width: calc(100vw - 32px);
  --rb-tour-tooltip-padding-xs: 10px;
  --rb-tour-tooltip-padding-sm: 12px;
  --rb-tour-tooltip-padding-md: 16px;
  --rb-tour-tooltip-padding-lg: 20px;
  --rb-tour-tooltip-padding-xl: 24px;
  --rb-tour-tooltip-padding-xxl: 28px;
  --rb-tour-tooltip-close-offset-top: -2px;
  --rb-tour-tooltip-close-offset-right: -4px;
  --rb-tour-tooltip-background: rgb(255, 255, 255);
  --rb-tour-tooltip-border: 1px solid rgba(17, 17, 17, 0.06);
  --rb-tour-tooltip-border-radius: 14px;
  --rb-tour-tooltip-title-font-size-xs: 14px;
  --rb-tour-tooltip-title-font-size-sm: 15px;
  --rb-tour-tooltip-title-font-size-md: 16px;
  --rb-tour-tooltip-title-font-size-lg: 18px;
  --rb-tour-tooltip-title-font-size-xl: 20px;
  --rb-tour-tooltip-title-font-size-xxl: 22px;
  --rb-tour-tooltip-title-font-weight: 600;
  --rb-tour-tooltip-title-line-height: 1.35;
  --rb-tour-tooltip-title-color: rgba(17, 17, 17, 0.96);
  --rb-tour-tooltip-description-font-size-xs: 12px;
  --rb-tour-tooltip-description-font-size-sm: 13px;
  --rb-tour-tooltip-description-font-size-md: 14px;
  --rb-tour-tooltip-description-font-size-lg: 15px;
  --rb-tour-tooltip-description-font-size-xl: 16px;
  --rb-tour-tooltip-description-font-size-xxl: 17px;
  --rb-tour-tooltip-description-line-height: 1.5;
  --rb-tour-tooltip-description-color: rgba(17, 17, 17, 0.62);
  --rb-tour-tooltip-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  --rb-tour-tooltip-z-index: 1010;
  --rb-tour-tooltip-animation-duration: 200ms;
  --rb-tour-tooltip-animation-easing: ease-out;
  --rb-tour-tooltip-glide-duration: 300ms;
  --rb-tour-tooltip-glide-easing: cubic-bezier(0.4, 0, 0.2, 1);

  /* Image */
  --rb-image-width: 100%;
  --rb-image-height: auto;
  --rb-image-border-radius: 10px;
  --rb-image-object-fit: cover;
  --rb-image-object-position: center;
}

Skip

Configure the "Don't show again" feature with persistent localStorage storage.

Container

The root wrapper that hosts the tour widget.