Components

Pre-styled display and question components: five survey containers and four accessible question input types with CVA variant support

Pre-built, accessible survey components. Display components control visibility based on survey state. Question components are controlled inputs that call back with typed values.

Display components

SurveyModal

Centered dialog with optional size and overlay-click dismiss

SurveySlideout

Side panel that slides in from the left or right edge

SurveyBanner

Top or bottom strip, optionally sticky and dismissable

SurveyPopover

Floating panel anchored to a DOM element via Floating UI

SurveyInline

Embedded directly in the page flow

Question components

QuestionRating

Numeric, star, or emoji rating scale with roving tabindex

QuestionText

Single-line input or resizable textarea with character count

QuestionSelect

Single-select (radio) or multi-select (checkbox) option lists

QuestionBoolean

Yes / No toggle pair

SurveyProgress

Question progress indicator: text, bar, or both

Composition pattern

Display components render their content through children. Compose question components inside:

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

<SurveyModal surveyId="nps-q1">
  <SurveyProgress current={1} total={2} />
  <QuestionRating
    id="score"
    label="How likely to recommend us (0–10)?"
    min={0}
    max={10}
    lowLabel="Not at all"
    highLabel="Extremely likely"
    onChange={(value) => survey.answer('score', value)}
  />
</SurveyModal>

Styling

All components forward className and accept standard HTML attributes via rest props. Variants are defined with CVA — import the variant functions to generate class names in custom implementations:

import {
  ratingOptionVariants,
  textInputVariants,
  selectOptionVariants,
  booleanOptionVariants,
  progressBarVariants,
} from '@tour-kit/surveys';

Turn-key recipes

For ready-made NPS / CSAT / CES modals with pre-wired scoring, see turn-key modals.

Headless alternative

If you need full control over markup and styling, use the headless components instead.