FeatureDrop

The open-source product adoption toolkit.
Changelogs • Tours • Checklists • Hotspots • Feedback — from your own codebase.
< 3 kB core  ·  Zero vendor lock-in  ·  MIT licensed

Quickstart • Components • Playground • API Reference • Migration Guide

Why FeatureDrop?

Every SaaS ships features. Users miss them. The usual options are bad:

FeatureDrop gives you a free, self-hosted middle path: production-ready adoption components that run inside your own React tree, powered by a JSON manifest you own.

Quick Start

npm install featuredrop     # < 3 kB core, zero runtime dependencies

1. Define your features:

import { createManifest } from 'featuredrop'

export const features = createManifest([
  {
    id: 'dark-mode',
    label: 'Dark Mode',
    description: 'Full dark theme support across every surface.',
    releasedAt: '2026-03-01T00:00:00Z',
    showNewUntil: '2026-04-01T00:00:00Z',
    type: 'feature',
    priority: 'high',
    cta: { label: 'Try it', url: '/settings/appearance' },
  },
])

2. Wrap your app:

import { FeatureDropProvider } from 'featuredrop/react'
import { LocalStorageAdapter } from 'featuredrop'
import { features } from './features'

<FeatureDropProvider manifest={features} storage={new LocalStorageAdapter()}>
  <App />
</FeatureDropProvider>

3. Add badges and a changelog:

import { NewBadge, ChangelogWidget } from 'featuredrop/react'

// Sidebar nav item
<a href="/settings">
  Settings <NewBadge id="dark-mode" />           {/* auto-expires */}
</a>

// Changelog button  
<ChangelogWidget title="What's new" showReactions />

That's it. Badges expire on schedule. No database setup. No vendor account. No tracking pixels.

→ Full walkthrough: 10-minute quickstart

Components

Everything you'd get from Beamer or Pendo, but free, self-hosted, and headless-first.

All components are headless-capable via render props. See live demos →

How It Works

  Manifest (static)                Storage (runtime)
  ┌─────────────────────┐         ┌──────────────────────┐
  │ releasedAt: Mar 1   │         │ watermark ← server   │
  │ showNewUntil: Apr 1 │         │ dismissed ← localStorage │
  └──────────┬──────────┘         └──────────┬───────────┘
             │                               │
             └──────────┐  ┌─────────────────┘
                        ▼  ▼
                ┌───────────────┐
                │   isNew()     │
                │               │
                │  !dismissed   │
                │  !expired     │
                │  afterWatermark│
                └───────┬───────┘
                        │
                   true / false

New users see everything (no watermark). Returning users see only features shipped since their last visit. Dismissals are instant (localStorage). "Mark all seen" syncs across devices with one optional server write.

Read the full Architecture doc for cross-device sync and custom adapter patterns.

Storage Adapters

All adapters →

CLI

Manage your manifest from the command line:

# Scaffold
npx featuredrop init
npx featuredrop add --label "Dark Mode" --category ui --type feature

# Validate & audit
npx featuredrop validate          # schema + duplicate ID check
npx featuredrop doctor            # security + best practice audit
npx featuredrop stats             # manifest summary stats

# Build (markdown → JSON)
npx featuredrop build --pattern "features/**/*.md" --out featuredrop.manifest.json

# Generate outputs
npx featuredrop generate-rss         --out featuredrop.rss.xml
npx featuredrop generate-changelog   --out CHANGELOG.generated.md

# Migrate from vendors
npx featuredrop migrate --from beamer      --input beamer-export.json
npx featuredrop migrate --from headway     --input headway-export.json
npx featuredrop migrate --from announcekit --input announcekit-export.json
npx featuredrop migrate --from canny       --input canny-export.json
npx featuredrop migrate --from launchnotes --input launchnotes-export.json

CLI reference →

Framework Adapters

Headless Hooks (for shadcn / custom UI)

Don't want our components? Use hooks — data + actions, zero JSX:

import { useChangelog } from 'featuredrop/react/hooks'
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet'
import { Badge } from '@/components/ui/badge'

function MyChangelog() {
  const { newFeatures, newCount, dismiss, markAllSeen } = useChangelog()

  return (
    <Sheet onOpenChange={() => markAllSeen()}>
      <SheetTrigger>
        What's New {newCount > 0 && <Badge>{newCount}</Badge>}
      </SheetTrigger>
      <SheetContent>
        {newFeatures.map(f => (
          <div key={f.id} onClick={() => dismiss(f.id)}>
            <h3>{f.label}</h3>
            <p>{f.description}</p>
          </div>
        ))}
      </SheetContent>
    </Sheet>
  )
}

When to use hooks vs components: If your project uses shadcn/ui, Radix, or any custom design system, use hooks from featuredrop/react/hooks. If you want out-of-the-box UI, use components from featuredrop/react.

shadcn/ui Components

Pre-built components that use shadcn primitives for UI + FeatureDrop hooks for logic. Install via the shadcn CLI:

npx shadcn@latest add https://featuredrop.dev/r/changelog-widget.json

Components land in components/featuredrop/ — you own the code. Full docs →

Try it now:

• Next.js + shadcn example — Open in StackBlitz
• Vanilla JS example — Zero build step, CDN import

AI-Native

FeatureDrop is built for the AI coding era. Your AI assistant already knows how to use it.

Claude Code Plugin

# Install the plugin — Claude Code learns FeatureDrop's API automatically
/plugin install featuredrop

Then just ask: "Add a changelog widget with auto-expiring badges to my app" — Claude handles the rest.

Context7 (works with any AI assistant)

# Search and install the FeatureDrop skill
npx ctx7 skills search FeatureDrop

Any AI coding assistant with Context7 support gets up-to-date FeatureDrop docs, API reference, and best practices injected into context automatically.

Cursor / Copilot

# Auto-detect your IDE and copy the right context files
npx featuredrop ai-setup

Tailwind Plugin

// tailwind.config.ts
import { featureDropPlugin } from 'featuredrop/tailwind'

export default {
  plugins: [featureDropPlugin()],
  // Adds: fd-badge, fd-badge-dot, fd-badge-count, animations, CSS variables
  // Auto dark mode, reduced-motion support
}

Notification Bridges

Fan out release notifications to Slack, Discord, email, webhooks, or RSS on deploy:

import { SlackBridge, DiscordBridge, WebhookBridge, EmailDigestGenerator, RSSFeedGenerator } from 'featuredrop/bridges'

await SlackBridge.notify(feature, { webhookUrl: process.env.SLACK_WEBHOOK! })
await DiscordBridge.notify(feature, { webhookUrl: process.env.DISCORD_WEBHOOK! })
await WebhookBridge.post(feature, { url: 'https://api.example.com/hooks/features' })

const html = EmailDigestGenerator.generate(features, { title: 'Weekly Product Updates' })
const rss  = RSSFeedGenerator.generate(features, { title: 'Product Updates' })

Analytics

Pipe adoption events to any analytics provider:

<FeatureDropProvider
  manifest={features}
  storage={storage}
  analytics={{
    onFeatureSeen:      (f) => posthog.capture('feature_seen',      { id: f.id }),
    onFeatureDismissed: (f) => posthog.capture('feature_dismissed', { id: f.id }),
    onFeatureClicked:   (f) => posthog.capture('feature_clicked',   { id: f.id }),
    onWidgetOpened:     ()  => posthog.capture('changelog_opened'),
  }}
>
  <App />
</FeatureDropProvider>

Works with PostHog, Mixpanel, Amplitude, Segment, or any custom endpoint.

User Segmentation

Show the right features to the right users:

<FeatureDropProvider
  manifest={features}
  storage={storage}
  userContext={{ plan: 'pro', role: 'admin', region: 'eu' }}
>
  <App />
</FeatureDropProvider>

Define audience rules per feature in your manifest:

{
  "id": "ai-copilot",
  "label": "AI Copilot",
  "audience": { "plan": ["pro", "enterprise"], "region": ["us", "eu"] }
}

Users outside the audience never see the feature. No server calls. No feature flag service needed.

CI Integration

Validate your manifest in every pull request:

import {
  diffManifest,
  generateChangelogDiff,
  generateChangelogDiffMarkdown,
  validateManifestForCI
} from 'featuredrop/ci'

const diff       = diffManifest(beforeManifest, afterManifest)
const summary    = generateChangelogDiff(diff, { includeFieldChanges: true })
const markdown   = generateChangelogDiffMarkdown(diff, { includeFieldChanges: true })
const validation = validateManifestForCI(afterManifest)

pnpm size-check   # bundle budget check post-build

CI setup guide →

Migration from Beamer / Pendo

npx featuredrop migrate --from beamer --input beamer-export.json --out features.json

Full migration guide →

Full Comparison

Documentation

Branding Assets

All marketing assets are in apps/docs/public/og/.

GitHub social preview: Repo Settings → Social preview → Upload apps/docs/public/og/github-social.png.

Contributing

See CONTRIBUTING.md for dev setup, commit conventions, and release process.

Security

• Report vulnerabilities privately via SECURITY.md
• CI includes CodeQL static analysis on PRs and main
• pnpm security-check scans runtime source for unsafe execution patterns

License

MIT © GLINR STUDIOS

_{Built and battle-tested at AskVerdict AI.}
A GLINR STUDIOS open source project.