Registry API Reference¶

The @survey-kit/registry package provides pre-built, accessible UI components.

Installation¶

npm install @survey-kit/registry

Primitives¶

Basic building blocks for survey interfaces.

Button¶

Versatile button with multiple variants.

import { Button } from '@survey-kit/registry'
;<Button variant="primary" size="md" onClick={handleClick}>
  Continue
</Button>

Prop	Type	Default	Description
`variant`	`'primary' \\| 'secondary' \\| 'outline' \\| 'ghost'`	`'primary'`	Style variant
`size`	`'sm' \\| 'md' \\| 'lg'`	`'md'`	Size
`disabled`	`boolean`	`false`	Disabled state

Input¶

Text input with validation support.

import { Input } from '@survey-kit/registry'
;<Input
  type="text"
  value={value}
  onChange={setValue}
  placeholder="Enter your name"
  error={errorMessage}
/>

Checkbox¶

Checkbox for single or multiple selections.

import { Checkbox } from '@survey-kit/registry'
;<Checkbox
  checked={isChecked}
  onChange={setChecked}
  label="I agree to the terms"
/>

Card¶

Container for grouping content.

import { Card } from '@survey-kit/registry'
;<Card>
  <Card.Header>
    <Card.Title>Question Title</Card.Title>
  </Card.Header>
  <Card.Content>{/* Content here */}</Card.Content>
</Card>

Heading¶

Semantic heading component.

import { Heading } from '@survey-kit/registry'
;<Heading level={2}>Section Title</Heading>

Layout¶

Components for structuring the survey interface.

Survey header with logo and actions.

import { Header } from '@survey-kit/registry'
;<Header
  variant="primary"
  logoSmall="/logo-sm.svg"
  logoLarge="/logo-lg.svg"
  actions={<Button>Save</Button>}
/>

Survey footer with links and branding.

import { Footer } from '@survey-kit/registry'
;<Footer
  logoSmall="/logo-sm.svg"
  links={[{ label: 'Privacy', href: '/privacy' }]}
  description="© 2024 Survey-Kit"
  onAction={handleAction}
/>

Side navigation panel.

import { Sidebar } from '@survey-kit/registry'
;<Sidebar variant="default">{/* Sidebar content */}</Sidebar>

SidebarMenu¶

Navigation menu for the sidebar.

import { SidebarMenu } from '@survey-kit/registry'
;<SidebarMenu
  items={menuItems}
  currentPage={currentPage}
  onNavigate={handleNavigate}
/>

Wrapper¶

Container wrapper component.

import { Wrapper } from '@survey-kit/registry'
;<Wrapper>{children}</Wrapper>

LayoutWrapper¶

Main layout container.

import { LayoutWrapper } from '@survey-kit/registry'
;<LayoutWrapper>{/* Layout content */}</LayoutWrapper>

MainContent¶

Main content area component.

import { MainContent } from '@survey-kit/registry'
;<MainContent>{children}</MainContent>

StageTabs¶

Tab navigation for survey stages.

import { StageTabs } from '@survey-kit/registry'
;<StageTabs
  stages={stages}
  currentStageId={currentStage}
  onStageClick={handleStageClick}
/>

Complex¶

Advanced components with specific functionality.

ProgressBar¶

Visual progress indicator.

import { ProgressBar } from '@survey-kit/registry'
;<ProgressBar progress={45} showPercentage />

EmojiSlider¶

Visual rating scale using emojis.

import { EmojiSlider } from '@survey-kit/registry'
;<EmojiSlider value={rating} onChange={setRating} min={1} max={5} />

Panel¶

Expandable information panel.

import { Panel } from '@survey-kit/registry'
;<Panel title="More Information" expanded={isOpen}>
  {/* Panel content */}
</Panel>

BlockedPage¶

Displayed when navigation is blocked.

import { BlockedPage } from '@survey-kit/registry'
;<BlockedPage
  message="Complete previous sections first"
  redirectUrl="/survey/page-1"
/>

CookieConsent¶

GDPR-compliant cookie consent banner.

import { CookieConsent, useCookieConsent } from '@survey-kit/registry'

const consent = useCookieConsent(categories)

<CookieConsent
  config={cookieConfig}
  onAcceptAll={consent.acceptAll}
  onRejectAll={consent.rejectAll}
  onSavePreferences={consent.saveGranular}
/>

Side navigation for applying filters to the Admin Dashboard.

import { FilterSidebar } from '@survey-kit/registry'
;<FilterSidebar
  filters={dashboardFilters}
  activeFilters={activeFilters}
  onFilterChange={setFilters}
/>

Prop	Type	Description
`filters`	`DashboardFilterConfig[]`	List of available filter dimensions.
`activeFilters`	`DashboardFilter[]`	Currently active filters.
`onFilterChange`	`(filters) => void`	Callback when filters are modified.

Chat¶

Components for chat-style survey rendering.

ChatContainer¶

Main wrapper for chat interface.

import { ChatContainer } from '@survey-kit/registry'
;<ChatContainer>{/* Chat messages */}</ChatContainer>

ChatBubble¶

Individual message bubble.

import { ChatBubble } from '@survey-kit/registry'

<ChatBubble variant="question">
  What is your name?
</ChatBubble>

<ChatBubble variant="answer">
  John
</ChatBubble>

Prop	Type	Description
`variant`	`'question' \\| 'answer'`	Bubble style

ChatMessage¶

Complete message with avatar/metadata.

import { ChatMessage } from '@survey-kit/registry'
;<ChatMessage type="question" content="What is your name?" />

ChatInput¶

Input field for chat responses.

import { ChatInput } from '@survey-kit/registry'
;<ChatInput
  type="text"
  value={value}
  onChange={setValue}
  onSubmit={handleSubmit}
  placeholder="Type your answer..."
/>

Supports types: 'text', 'radio', 'checkbox'

TypingIndicator¶

Animated typing dots.

import { TypingIndicator } from '@survey-kit/registry'
;<TypingIndicator />

ChatReviewScreen¶

Summary screen before submission.

import { ChatReviewScreen } from '@survey-kit/registry'
;<ChatReviewScreen
  questions={questions}
  answers={answers}
  onEdit={handleEdit}
  onSubmit={handleSubmit}
/>

Sections¶

SectionPage¶

Standalone page for intro/completion screens.

import { SectionPage } from '@survey-kit/registry'
;<SectionPage
  config={sectionConfig}
  onNavigate={handleNavigate}
  onAction={handleAction}
/>

Charts¶

Visualization components for administrative dashboards.

TrendLineChart¶

Displays survey response trends over time.

import { TrendLineChart } from '@survey-kit/registry'
;<TrendLineChart data={trendData} />

DropoffBarChart¶

Visualises response drop-off rates at different survey stages.

import { DropoffBarChart } from '@survey-kit/registry'
;<DropoffBarChart data={dropoffData} />

Accessibility¶

All components follow WCAG 2.2 AA guidelines:

Proper ARIA labels and roles
Keyboard navigation support
Screen reader compatibility
Focus management
High contrast mode support