SurveyModal

Centered dialog that shows when the survey's isVisible flag is true, built on Radix UI Dialog with configurable size and dismiss behaviour

SurveyModal is a centered dialog built on @radix-ui/react-dialog. It reads survey.state.isVisible via useSurvey and opens or closes accordingly. Pass open and onOpenChange to take full control.

Import

import { SurveyModal } from '@tour-kit/surveys';

Usage

import { SurveyModal, QuestionRating, useSurvey } from '@tour-kit/surveys';

function NPSSurvey() {
  const survey = useSurvey('nps-q1');

  return (
    <SurveyModal surveyId="nps-q1">
      <QuestionRating
        id="score"
        label="How likely are you to recommend us?"
        min={0}
        max={10}
        onChange={(value) => {
          survey.answer('score', value);
          survey.complete();
        }}
      />
    </SurveyModal>
  );
}

Controlled open state

const [open, setOpen] = useState(false);

<SurveyModal
  surveyId="nps-q1"
  open={open}
  onOpenChange={setOpen}
>
  {/* content */}
</SurveyModal>

Props

Prop

Type

Variants

SurveyModal uses CVA variants for the content panel size:

Variant	Values	Default
`size`	`'sm'` `'md'` `'lg'`	`'md'`

Size maps to max-width: sm → max-w-sm, md → max-w-md, lg → max-w-lg.

Dismiss behaviour

The modal handles three dismiss triggers automatically:

Trigger	`DismissalReason`
Close button click	`'close_button'`
Overlay click (if `closeOnOverlayClick: true`)	`'overlay_click'`
Escape key (if `closeOnEscape: true`)	`'escape_key'`

All triggers call survey.dismiss(reason) and fire the onDismiss callbacks.

Focus is trapped inside the dialog while open and restored to the previously focused element on close, courtesy of Radix UI Dialog's built-in focus management.

ModalOptions defaults

{
  closeOnOverlayClick: true,
  closeOnEscape: true,
  showCloseButton: true,
  size: 'md',
}

Override per-survey via SurveyConfig.modalOptions, or at render time via the options prop. Render-time options are merged on top of config options.

SurveyModal

On this page