SurveySlideout

Side panel that slides in from the left or right edge, built on Radix UI Dialog with configurable position and size variants

SurveySlideout is a full-height side panel built on @radix-ui/react-dialog. It behaves identically to SurveyModal in terms of state management and dismiss handling, but positions content at the viewport edge.

Import

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

Usage

import { SurveySlideout, QuestionText, useSurvey } from '@tour-kit/surveys';

function CancellationSurvey() {
  const survey = useSurvey('cancel-reason');

  return (
    <SurveySlideout surveyId="cancel-reason" position="right" size="md">
      <QuestionText
        id="reason"
        label="What made you decide to cancel?"
        mode="textarea"
        rows={4}
        onChange={(value) => survey.answer('reason', value)}
      />
      <button onClick={survey.complete}>Submit</button>
    </SurveySlideout>
  );
}

Props

Prop

Type

Variants

Variant	Values	Default
`position`	`'left'` `'right'`	`'right'`
`size`	`'sm'` `'md'` `'lg'`	`'md'`

Width at each size: sm → max-w-sm, md → max-w-md, lg → max-w-lg (at sm breakpoint+, 75vw below).

SlideoutOptions defaults

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