Component Gallery

FeatureDrop ships 15 composable React components for product adoption. Every component supports a render-prop API for full custom UI, or use the built-in defaults for speed.

npm install featuredrop

import { FeatureDropProvider } from 'featuredrop/react'
import { MemoryAdapter } from 'featuredrop'

All components must be descendants of FeatureDropProvider. They read from the manifest and auto-expire based on showNewUntil.

Changelog Widget

Drop-in slide-out panel for release notes. Supports Markdown, emoji reactions, read-state tracking, and category filters.

import { ChangelogWidget } from 'featuredrop/react'
 
<ChangelogWidget title="What's new" triggerLabel="Updates" />

Prop	Type	Default	Description
`title`	`string`	`"What's New"`	Panel heading
`triggerLabel`	`string`	`"What's New"`	Button text
`position`	`"left" \| "right"`	`"right"`	Slide-out direction
`maxItems`	`number`	`50`	Max entries to display

Full docs →

Announcement Modal

High-impact, multi-slide modal dialog for major feature launches. Supports images, CTAs, and step indicators.

import { AnnouncementModal } from 'featuredrop/react'
 
<AnnouncementModal featureId="v2-launch" />

Prop	Type	Default	Description
`featureId`	`string`	Required	Feature to announce
`slides`	`Slide[]`	—	Content slides
`onComplete`	`() => void`	—	Called when user finishes

Full docs →

Tour

Guided onboarding sequences with step-by-step navigation. Render-prop API gives full control over UI.

import { Tour } from 'featuredrop/react'
 
<Tour id="onboarding" steps={steps}>
  {({ isActive, step, startTour, nextStep, skipTour }) => (
    // Your custom tour UI
  )}
</Tour>

Prop	Type	Default	Description
`id`	`string`	Required	Unique tour ID
`steps`	`TourStep[]`	Required	Array of step definitions
`persistence`	`boolean`	`true`	Remember progress
`onComplete`	`() => void`	—	Called when tour finishes

Full docs →

Spotlight

Single-target highlight with a pulsing beacon and tooltip. Draws attention to new UI elements.

import { Spotlight } from 'featuredrop/react'
 
<Spotlight featureId="new-dashboard" targetSelector="#dashboard-btn" />

Prop	Type	Default	Description
`featureId`	`string`	Required	Feature to spotlight
`targetSelector`	`string`	Required	CSS selector for target element
`placement`	`"top" \| "bottom" \| "left" \| "right"`	`"bottom"`	Tooltip position

Full docs →

Spotlight Chain

Multi-step highlight flows chaining multiple Spotlights in sequence. Useful for feature walkthroughs.

import { SpotlightChain } from 'featuredrop/react'
 
<SpotlightChain
  id="feature-walkthrough"
  steps={[
    { featureId: 'step-1', targetSelector: '#btn-1' },
    { featureId: 'step-2', targetSelector: '#btn-2' },
  ]}
/>

Full docs →

Hotspot

Subtle, pulsing inline contextual hints that expand into small tooltips on hover or click.

import { Hotspot } from 'featuredrop/react'
 
<Hotspot featureId="new-filter" targetSelector="#filter-btn" />

Prop	Type	Default	Description
`featureId`	`string`	Required	Feature to highlight
`targetSelector`	`string`	Required	CSS selector for target
`trigger`	`"hover" \| "click"`	`"hover"`	How to expand tooltip

Full docs →

Banner + Toast

Persistent banners for announcements and ephemeral toasts for short-lived alerts.

import { Banner, Toast } from 'featuredrop/react'
 
<Banner featureId="maintenance" position="inline" variant="announcement" />
<Toast featureIds={['new-api']} autoDismissMs={5000} position="bottom-right" />

Component	Key Prop	Description
`Banner`	`position: "top" \| "inline"`	Persistent announcement
`Toast`	`autoDismissMs: number`	Auto-dismissing notification

Full docs →

Checklist

Task-driven onboarding with progress tracking. Inline or floating position.

import { Checklist } from 'featuredrop/react'
 
<Checklist
  id="setup-checklist"
  tasks={[
    { id: 'connect', title: 'Connect provider', estimatedTime: '2m' },
    { id: 'widget', title: 'Add widget', estimatedTime: '3m' },
  ]}
  position="inline"
/>

Prop	Type	Default	Description
`id`	`string`	Required	Unique checklist ID
`tasks`	`ChecklistTask[]`	Required	Task definitions
`position`	`"inline" \| "floating"`	`"inline"`	Display mode
`onComplete`	`() => void`	—	All tasks done callback

Full docs →

Feedback Widget

Contextual feedback collection with categories and rate limiting. Render-prop API for custom forms.

import { FeedbackWidget } from 'featuredrop/react'
 
<FeedbackWidget
  featureId="new-editor"
  categories={['bug', 'suggestion', 'praise']}
  onSubmit={async (payload) => sendToApi(payload)}
  rateLimit="1-per-session"
/>

Prop	Type	Default	Description
`featureId`	`string`	Required	Context feature
`categories`	`string[]`	—	Feedback categories
`onSubmit`	`(payload) => Promise<void>`	Required	Submit handler
`rateLimit`	`string`	—	Rate limiting rule

Full docs →

Survey

Trigger-based or manual NPS/CSAT survey dialogs.

import { Survey } from 'featuredrop/react'
 
<Survey
  id="nps-q1"
  type="nps"
  onSubmit={async (result) => trackSurvey(result)}
/>

Prop	Type	Default	Description
`id`	`string`	Required	Unique survey ID
`type`	`"nps" \| "csat" \| "custom"`	`"nps"`	Survey type
`onSubmit`	`(result) => Promise<void>`	Required	Submit handler

Full docs →

Feature Requests

Capture roadmap ideas and prioritize by in-app voting.

import { FeatureRequestWidget } from 'featuredrop/react'
 
<FeatureRequestWidget
  onSubmit={async (request) => saveRequest(request)}
  categories={['ui', 'api', 'integrations']}
/>

Full docs →

Launch Flow

End-to-end orchestration combining Banner → Tour → Checklist → Feedback in one coordinated sequence.

// Coordinate components with state:
// Banner acknowledgement → starts Tour
// Tour completion → shows Checklist
// Checklist done → triggers Feedback

Full docs →

Primitives

These foundational components are used by higher-level components but can also be used standalone:

Component	Import	Description
`NewBadge`	`featuredrop/react`	"New" indicator with `pill`, `dot`, `count` variants
`ThemeProvider`	`featuredrop/react`	Theme context for `light` / `dark` mode
`ErrorBoundary`	`featuredrop/react`	Graceful fallback for component errors

import { NewBadge } from 'featuredrop/react'
 
<NewBadge id="dark-mode" variant="pill" />
<NewBadge id="dark-mode" variant="dot" />
<NewBadge id="dark-mode" variant="count" />

Animation Changelog