{
  "markdown": "<p align=\"center\">\n  <img src=\"apps/docs/public/branding/icon-256.png\" alt=\"FeatureDrop\" width=\"72\" height=\"72\" />\n</p>\n\n<h1 align=\"center\">FeatureDrop</h1>\n\n<p align=\"center\">\n  <strong>The open-source product adoption toolkit.</strong><br />\n  Changelogs • Tours • Checklists • Hotspots • Feedback — from your own codebase.<br />\n  &lt; 3 kB core &nbsp;·&nbsp; Zero vendor lock-in &nbsp;·&nbsp; MIT licensed\n</p>\n\n<p align=\"center\">\n  <a href=\"https://github.com/GLINCKER/featuredrop/stargazers\"><img src=\"https://img.shields.io/github/stars/GLINCKER/featuredrop?style=flat&color=f59e0b&label=stars\" alt=\"GitHub stars\" /></a>\n  <a href=\"https://www.npmjs.com/package/featuredrop\"><img src=\"https://img.shields.io/npm/v/featuredrop?color=ea580c&label=npm\" alt=\"npm version\" /></a>\n  <a href=\"https://www.npmjs.com/package/featuredrop\"><img src=\"https://img.shields.io/npm/dm/featuredrop?color=22c55e&label=downloads\" alt=\"npm downloads\" /></a>\n  <a href=\"https://bundlephobia.com/package/featuredrop\"><img src=\"https://img.shields.io/bundlephobia/minzip/featuredrop?color=22c55e&label=gzipped\" alt=\"bundle size\" /></a>\n  <a href=\"https://github.com/GLINCKER/featuredrop/blob/main/LICENSE\"><img src=\"https://img.shields.io/npm/l/featuredrop?color=6366f1&label=license\" alt=\"MIT license\" /></a>\n  <a href=\"https://featuredrop.dev\"><img src=\"https://img.shields.io/badge/docs-live-ea580c\" alt=\"Live docs\" /></a>\n  <a href=\"https://www.producthunt.com/products/featuredrop\"><img src=\"https://img.shields.io/badge/Product%20Hunt-Featured-ff6154?logo=producthunt&logoColor=white\" alt=\"Product Hunt\" /></a>\n  <a href=\"https://context7.com/glincker/featuredrop\"><img src=\"https://img.shields.io/badge/Context7-Indexed-0ea5e9?logo=data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTIgMkM2LjQ4IDIgMiA2LjQ4IDIgMTJzNC40OCAxMCAxMCAxMCAxMC00LjQ4IDEwLTEwUzE3LjUyIDIgMTIgMnoiIGZpbGw9IndoaXRlIi8+PC9zdmc+\" alt=\"Context7\" /></a>\n</p>\n\n<p align=\"center\">\n  <a href=\"https://featuredrop.dev/docs/quickstart\">Quickstart</a> &bull;\n  <a href=\"https://featuredrop.dev/docs/components/gallery\">Components</a> &bull;\n  <a href=\"https://featuredrop.dev/playground\">Playground</a> &bull;\n  <a href=\"https://featuredrop.dev/docs/api\">API Reference</a> &bull;\n  <a href=\"#migration-from-beamer--pendo\">Migration Guide</a>\n</p>\n\n<p align=\"center\">\n  <img src=\"apps/docs/public/og/github-social.png\" alt=\"FeatureDrop — The open-source product adoption toolkit\" width=\"720\" />\n</p>\n\n\n---\n\n## Why FeatureDrop?\n\nEvery SaaS ships features. Users miss them. The usual options are bad:\n\n| Option | Problem |\n|---|---|\n| **Beamer / Headway / AnnounceKit** | External widget, vendor lock-in, $49–399/mo |\n| **Pendo / Appcues** | Feature flags AND onboarding, ~$7k+/yr |\n| **Joyride / Shepherd.js** | Tours only, not persistence or changelog |\n| **DIY** | You build it, forget expiry, badges stay forever |\n\n**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.\n\n---\n\n## Quick Start\n\n```bash\nnpm install featuredrop     # < 3 kB core, zero runtime dependencies\n```\n\n**1. Define your features:**\n\n```ts\nimport { createManifest } from 'featuredrop'\n\nexport const features = createManifest([\n  {\n    id: 'dark-mode',\n    label: 'Dark Mode',\n    description: 'Full dark theme support across every surface.',\n    releasedAt: '2026-03-01T00:00:00Z',\n    showNewUntil: '2026-04-01T00:00:00Z',\n    type: 'feature',\n    priority: 'high',\n    cta: { label: 'Try it', url: '/settings/appearance' },\n  },\n])\n```\n\n**2. Wrap your app:**\n\n```tsx\nimport { FeatureDropProvider } from 'featuredrop/react'\nimport { LocalStorageAdapter } from 'featuredrop'\nimport { features } from './features'\n\n<FeatureDropProvider manifest={features} storage={new LocalStorageAdapter()}>\n  <App />\n</FeatureDropProvider>\n```\n\n**3. Add badges and a changelog:**\n\n```tsx\nimport { NewBadge, ChangelogWidget } from 'featuredrop/react'\n\n// Sidebar nav item\n<a href=\"/settings\">\n  Settings <NewBadge id=\"dark-mode\" />           {/* auto-expires */}\n</a>\n\n// Changelog button  \n<ChangelogWidget title=\"What's new\" showReactions />\n```\n\nThat's it. Badges expire on schedule. No database setup. No vendor account. No tracking pixels.\n\n→ **Full walkthrough:** [10-minute quickstart](https://featuredrop.dev/docs/quickstart)\n\n---\n\n## Components\n\nEverything you'd get from Beamer or Pendo, but free, self-hosted, and headless-first.\n\n| Component | Description |\n|---|---|\n| `<ChangelogWidget>` | Trigger button + slide-out/modal changelog with emoji reactions |\n| `<ChangelogPage>` | Full-page changelog with filters, search, and pagination |\n| `<NewBadge>` | Auto-expiring pill / dot / count badge |\n| `<Banner>` | Top-of-page or inline banner with `announcement`, `warning`, `info` variants |\n| `<Toast>` | Stackable toast notifications with auto-dismiss and position control |\n| `<Tour>` | Multi-step guided product tours with keyboard nav and persistence |\n| `<Checklist>` | Onboarding task checklists with progress tracking |\n| `<Spotlight>` | Pulsing DOM-attached beacon/tooltip |\n| `<SpotlightChain>` | Chained spotlight walkthrough (\"here are 3 new things\") |\n| `<AnnouncementModal>` | Priority-gated modal with optional image carousel |\n| `<Hotspot>` / `<TooltipGroup>` | Persistent contextual hints with visibility caps |\n| `<FeedbackWidget>` | In-app feedback with category, emoji, screenshot support |\n| `<Survey>` | NPS / CSAT / CES / custom survey engine with trigger rules |\n| `<FeatureRequestButton>` | Per-feature voting button with vote guard |\n| `<FeatureRequestForm>` | Request capture + sortable request list |\n\nAll components are headless-capable via render props. [See live demos →](https://featuredrop.dev/docs/components/gallery)\n\n---\n\n## How It Works\n\n```\n  Manifest (static)                Storage (runtime)\n  ┌─────────────────────┐         ┌──────────────────────┐\n  │ releasedAt: Mar 1   │         │ watermark ← server   │\n  │ showNewUntil: Apr 1 │         │ dismissed ← localStorage │\n  └──────────┬──────────┘         └──────────┬───────────┘\n             │                               │\n             └──────────┐  ┌─────────────────┘\n                        ▼  ▼\n                ┌───────────────┐\n                │   isNew()     │\n                │               │\n                │  !dismissed   │\n                │  !expired     │\n                │  afterWatermark│\n                └───────┬───────┘\n                        │\n                   true / false\n```\n\nNew 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.\n\nRead the full [Architecture doc](https://featuredrop.dev/docs/concepts/architecture) for cross-device sync and custom adapter patterns.\n\n---\n\n## Storage Adapters\n\n| Adapter | Import | Best For |\n|---|---|---|\n| `LocalStorageAdapter` | `featuredrop` | Browser apps (default) |\n| `MemoryAdapter` | `featuredrop` | Testing, SSR |\n| `IndexedDBAdapter` | `featuredrop/adapters` | Offline-first PWAs |\n| `RemoteAdapter` | `featuredrop/adapters` | Server-backed with retry + circuit-breaker |\n| `HybridAdapter` | `featuredrop/adapters` | Local + remote with batched flush |\n| Redis / PostgreSQL / DynamoDB | `featuredrop/adapters` | Database-backed server-side apps |\n\n[All adapters →](https://featuredrop.dev/docs/adapters/overview)\n\n---\n\n## CLI\n\nManage your manifest from the command line:\n\n```bash\n# Scaffold\nnpx featuredrop init\nnpx featuredrop add --label \"Dark Mode\" --category ui --type feature\n\n# Validate & audit\nnpx featuredrop validate          # schema + duplicate ID check\nnpx featuredrop doctor            # security + best practice audit\nnpx featuredrop stats             # manifest summary stats\n\n# Build (markdown → JSON)\nnpx featuredrop build --pattern \"features/**/*.md\" --out featuredrop.manifest.json\n\n# Generate outputs\nnpx featuredrop generate-rss         --out featuredrop.rss.xml\nnpx featuredrop generate-changelog   --out CHANGELOG.generated.md\n\n# Migrate from vendors\nnpx featuredrop migrate --from beamer      --input beamer-export.json\nnpx featuredrop migrate --from headway     --input headway-export.json\nnpx featuredrop migrate --from announcekit --input announcekit-export.json\nnpx featuredrop migrate --from canny       --input canny-export.json\nnpx featuredrop migrate --from launchnotes --input launchnotes-export.json\n```\n\n[CLI reference →](https://featuredrop.dev/docs/automation/ci)\n\n---\n\n## Framework Adapters\n\n| Framework | Status | Import |\n|---|---|---|\n| React / Next.js | ✅ Stable | `featuredrop/react` |\n| Vanilla JS | ✅ Stable | `featuredrop` |\n| SolidJS | 🔬 Preview | `featuredrop/solid` |\n| Preact | 🔬 Preview | `featuredrop/preact` |\n| Web Components | 🔬 Preview | `featuredrop/web-components` |\n| Angular | 🔬 Preview | `featuredrop/angular` |\n| Vue 3 | 🔬 Preview | `featuredrop/vue` |\n| Svelte 5 | 🔬 Preview | `featuredrop/svelte` |\n\n---\n\n## Headless Hooks (for shadcn / custom UI)\n\nDon't want our components? Use hooks — **data + actions, zero JSX**:\n\n```tsx\nimport { useChangelog } from 'featuredrop/react/hooks'\nimport { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet'\nimport { Badge } from '@/components/ui/badge'\n\nfunction MyChangelog() {\n  const { newFeatures, newCount, dismiss, markAllSeen } = useChangelog()\n\n  return (\n    <Sheet onOpenChange={() => markAllSeen()}>\n      <SheetTrigger>\n        What's New {newCount > 0 && <Badge>{newCount}</Badge>}\n      </SheetTrigger>\n      <SheetContent>\n        {newFeatures.map(f => (\n          <div key={f.id} onClick={() => dismiss(f.id)}>\n            <h3>{f.label}</h3>\n            <p>{f.description}</p>\n          </div>\n        ))}\n      </SheetContent>\n    </Sheet>\n  )\n}\n```\n\n| Hook | Import | Returns |\n|---|---|---|\n| `useFeatureDrop()` | `featuredrop/react/hooks` | Full context: features, count, dismiss, throttle controls |\n| `useNewFeature(key)` | `featuredrop/react/hooks` | `{ isNew, feature, dismiss }` |\n| `useNewCount()` | `featuredrop/react/hooks` | Current unread badge count |\n| `useChangelog()` | `featuredrop/react/hooks` | `{ features, newFeatures, newCount, dismiss, dismissAll, markAllSeen, getByCategory }` |\n| `useTour(id)` | `featuredrop/react/hooks` | Imperative tour controls and step snapshot |\n| `useTourSequencer(sequence)` | `featuredrop/react/hooks` | Ordered multi-tour orchestration |\n| `useChecklist(id)` | `featuredrop/react/hooks` | Checklist progress + task controls |\n| `useSurvey(id)` | `featuredrop/react/hooks` | Survey controls: `show`, `hide`, `askLater` |\n| `useTabNotification()` | `featuredrop/react/hooks` | Browser tab title count: `\"(3) My App\"` |\n\n> **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`.\n\n### shadcn/ui Components\n\nPre-built components that use shadcn primitives for UI + FeatureDrop hooks for logic. Install via the shadcn CLI:\n\n```bash\nnpx shadcn@latest add https://featuredrop.dev/r/changelog-widget.json\n```\n\n| Component | Install |\n|-----------|---------|\n| New Badge | `npx shadcn@latest add https://featuredrop.dev/r/new-badge.json` |\n| Changelog Widget | `npx shadcn@latest add https://featuredrop.dev/r/changelog-widget.json` |\n| Tour | `npx shadcn@latest add https://featuredrop.dev/r/tour.json` |\n| Checklist | `npx shadcn@latest add https://featuredrop.dev/r/checklist.json` |\n| Feedback Widget | `npx shadcn@latest add https://featuredrop.dev/r/feedback-widget.json` |\n\nComponents land in `components/featuredrop/` — you own the code. [Full docs &rarr;](https://featuredrop.dev/docs/shadcn)\n\n**Try it now:**\n- [Next.js + shadcn example](https://stackblitz.com/github/GLINCKER/featuredrop/tree/main/examples/nextjs-shadcn) — Open in StackBlitz\n- [Vanilla JS example](examples/vanilla/index.html) — Zero build step, CDN import\n\n---\n\n## AI-Native\n\nFeatureDrop is built for the AI coding era. Your AI assistant already knows how to use it.\n\n### Claude Code Plugin\n\n```bash\n# Install the plugin — Claude Code learns FeatureDrop's API automatically\n/plugin install featuredrop\n```\n\nThen just ask: *\"Add a changelog widget with auto-expiring badges to my app\"* — Claude handles the rest.\n\n### Context7 (works with any AI assistant)\n\n```bash\n# Search and install the FeatureDrop skill\nnpx ctx7 skills search FeatureDrop\n```\n\nAny AI coding assistant with Context7 support gets up-to-date FeatureDrop docs, API reference, and best practices injected into context automatically.\n\n### Cursor / Copilot\n\n```bash\n# Auto-detect your IDE and copy the right context files\nnpx featuredrop ai-setup\n```\n\n### Tailwind Plugin\n\n```ts\n// tailwind.config.ts\nimport { featureDropPlugin } from 'featuredrop/tailwind'\n\nexport default {\n  plugins: [featureDropPlugin()],\n  // Adds: fd-badge, fd-badge-dot, fd-badge-count, animations, CSS variables\n  // Auto dark mode, reduced-motion support\n}\n```\n\n---\n\n## Notification Bridges\n\nFan out release notifications to Slack, Discord, email, webhooks, or RSS on deploy:\n\n```ts\nimport { SlackBridge, DiscordBridge, WebhookBridge, EmailDigestGenerator, RSSFeedGenerator } from 'featuredrop/bridges'\n\nawait SlackBridge.notify(feature, { webhookUrl: process.env.SLACK_WEBHOOK! })\nawait DiscordBridge.notify(feature, { webhookUrl: process.env.DISCORD_WEBHOOK! })\nawait WebhookBridge.post(feature, { url: 'https://api.example.com/hooks/features' })\n\nconst html = EmailDigestGenerator.generate(features, { title: 'Weekly Product Updates' })\nconst rss  = RSSFeedGenerator.generate(features, { title: 'Product Updates' })\n```\n\n---\n\n## Analytics\n\nPipe adoption events to any analytics provider:\n\n```tsx\n<FeatureDropProvider\n  manifest={features}\n  storage={storage}\n  analytics={{\n    onFeatureSeen:      (f) => posthog.capture('feature_seen',      { id: f.id }),\n    onFeatureDismissed: (f) => posthog.capture('feature_dismissed', { id: f.id }),\n    onFeatureClicked:   (f) => posthog.capture('feature_clicked',   { id: f.id }),\n    onWidgetOpened:     ()  => posthog.capture('changelog_opened'),\n  }}\n>\n  <App />\n</FeatureDropProvider>\n```\n\nWorks with PostHog, Mixpanel, Amplitude, Segment, or any custom endpoint.\n\n---\n\n## User Segmentation\n\nShow the right features to the right users:\n\n```tsx\n<FeatureDropProvider\n  manifest={features}\n  storage={storage}\n  userContext={{ plan: 'pro', role: 'admin', region: 'eu' }}\n>\n  <App />\n</FeatureDropProvider>\n```\n\nDefine audience rules per feature in your manifest:\n\n```json\n{\n  \"id\": \"ai-copilot\",\n  \"label\": \"AI Copilot\",\n  \"audience\": { \"plan\": [\"pro\", \"enterprise\"], \"region\": [\"us\", \"eu\"] }\n}\n```\n\nUsers outside the audience never see the feature. No server calls. No feature flag service needed.\n\n---\n\n## CI Integration\n\nValidate your manifest in every pull request:\n\n```ts\nimport {\n  diffManifest,\n  generateChangelogDiff,\n  generateChangelogDiffMarkdown,\n  validateManifestForCI\n} from 'featuredrop/ci'\n\nconst diff       = diffManifest(beforeManifest, afterManifest)\nconst summary    = generateChangelogDiff(diff, { includeFieldChanges: true })\nconst markdown   = generateChangelogDiffMarkdown(diff, { includeFieldChanges: true })\nconst validation = validateManifestForCI(afterManifest)\n```\n\n```bash\npnpm size-check   # bundle budget check post-build\n```\n\n[CI setup guide →](https://featuredrop.dev/docs/automation/ci)\n\n---\n\n## Migration from Beamer / Pendo\n\n```bash\nnpx featuredrop migrate --from beamer --input beamer-export.json --out features.json\n```\n\n| | Beamer | Pendo | **FeatureDrop** |\n|---|---|---|---|\n| Price | $59–399/mo | $7k+/yr | **Free (MIT)** |\n| Bundle impact | External script | ~300 kB agent | **< 3 kB core** |\n| Vendor lock-in | Yes | Yes | **No** |\n| Data ownership | Vendor-hosted | Vendor-hosted | **Your repo** |\n| Customization | CSS themes | Limited | **Full source access** |\n\n[Full migration guide →](https://featuredrop.dev/docs/migration)\n\n---\n\n## Full Comparison\n\n| | FeatureDrop | Beamer | Headway | AnnounceKit | Pendo |\n|---|:---:|:---:|:---:|:---:|:---:|\n| **Price** | **Free** | $59–399/mo | $49–249/mo | $79–299/mo | $7k+/yr |\n| Auto-expiring badges | ✅ | — | — | — | — |\n| Changelog widget | ✅ | ✅ | ✅ | ✅ | ✅ |\n| Product tours | ✅ | — | — | — | ✅ |\n| Onboarding checklists | ✅ | — | — | — | ✅ |\n| Spotlight / beacon | ✅ | — | — | — | — |\n| Hotspot tooltips | ✅ | — | — | — | — |\n| Announcement modal | ✅ | — | — | — | — |\n| Toast notifications | ✅ | — | — | — | — |\n| Feedback & surveys | ✅ | — | — | — | ✅ |\n| Feature request voting | ✅ | — | — | — | — |\n| Tab title notification | ✅ | — | — | — | — |\n| Zero runtime deps (core) | ✅ | — | — | — | — |\n| Framework agnostic | ✅ | — | — | — | — |\n| Headless mode | ✅ | — | — | — | — |\n| Analytics callbacks | ✅ | ✅ | ✅ | ✅ | ✅ |\n| Self-hosted | ✅ | — | — | — | — |\n| Open source | ✅ | — | — | — | — |\n\n---\n\n## Documentation\n\n| Resource | Description |\n|---|---|\n| [**Live Docs**](https://featuredrop.dev) | Full documentation site |\n| [Quickstart](https://featuredrop.dev/docs/quickstart) | Ship your first badge in 10 minutes |\n| [Component Gallery](https://featuredrop.dev/docs/components/gallery) | Live interactive demos |\n| [Playground](https://featuredrop.dev/playground) | Local sandbox + hosted templates |\n| [API Reference](https://featuredrop.dev/docs/api) | All functions, hooks, and components |\n| [Migration Guide](https://featuredrop.dev/docs/migration) | Migrate from Beamer, Pendo, Headway |\n| [Architecture](https://featuredrop.dev/docs/concepts/architecture) | Three-check algorithm, cross-device sync |\n| [Recipes](https://featuredrop.dev/docs/recipes) | Copy-paste integration patterns |\n| [Frameworks](https://featuredrop.dev/docs/frameworks/vue) | Vue, Svelte, Solid, Angular, Preact, Web Components |\n\n---\n\n## Branding Assets\n\nAll marketing assets are in [`apps/docs/public/og/`](apps/docs/public/og/).\n\n| File | Ratio | Use |\n|---|---|---|\n| `og.png` | 1200×630 (1.91:1) | Website OG / link previews, Discord, Slack |\n| `github-social.png` | 1280×640 (2:1) | **GitHub repo social preview** ← upload this |\n| `twitter-header.png` | 1500×500 (3:1) | X.com profile header |\n| `linkedin-banner.png` | 1584×396 (4:1) | LinkedIn company page banner |\n| `reddit-16x9.png` | 1920×1080 (16:9) | Reddit posts, r/reactjs, r/webdev |\n| `producthunt.png` | 1270×760 | Product Hunt launch |\n| `story-9x16.png` | 1080×1920 (9:16) | Instagram / LinkedIn Stories |\n\n**GitHub social preview**: Repo **Settings → Social preview → Upload** `apps/docs/public/og/github-social.png`.\n\n---\n\n## Contributing\n\nSee [CONTRIBUTING.md](CONTRIBUTING.md) for dev setup, commit conventions, and release process.\n\n## Security\n\n- Report vulnerabilities privately via [SECURITY.md](SECURITY.md)\n- CI includes CodeQL static analysis on PRs and `main`\n- `pnpm security-check` scans runtime source for unsafe execution patterns\n\n## License\n\nMIT © [GLINR STUDIOS](https://glincker.com)\n\n---\n\n<p align=\"center\">\n  <sub>Built and battle-tested at <a href=\"https://askverdict.ai\">AskVerdict AI</a>.</sub><br />\n  <strong>A <a href=\"https://glincker.com\">GLINR STUDIOS</a> open source project.</strong>\n</p>\n",
  "bytes": 19368,
  "sha": "8b2d1d3118efbd3350f5074a79dd025729e50c9f990cd5bbd9907108388e5ca8",
  "repo_slug": "glincker/featuredrop",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/plg_glincker_featuredrop_featuredrop_5ab21719/readme"
}