FeatureDrop v3 — Your App Now Decides When and How to Show Features

Published: 2 days ago (March 1, 2026 at 12:58 AM EST)

6 min read

Source: Dev.to

Source: Dev.to

GitHub | Docs | npm | shadcn Components | Example App

TL;DR

Client‑side behavioral engine – 4 kB, zero servers
Automatic format selection (badge / toast / modal) per user
Free, MIT licensed – 479 tests, works with Next.js, Remix, Astro, Nuxt + shadcn

Every product‑adoption tool — Pendo, Appcues, Chameleon — works the same way:

Collect weeks of server‑side analytics.
Tell you which users to nudge.

They charge $250–$7,000 / month for it.

We built a 4 kB client‑side engine that makes the same decisions from session 1. No server. No data collection. MIT licensed.

FeatureDrop v3 (v2 launch post [here] if you want the backstory — it blew up, so I kept building.)

What v3 ships

Metric	v2.7	v3.0
Core bundle (gzip)	3.01 kB	3.02 kB
Engine bundle (gzip)	—	4.08 kB
Tests	374	479
Sub‑path exports	20	26
Framework integrations	7	11
shadcn components	0	5
CLI commands	9	10

The core didn’t grow. Zero runtime dependencies. The engine is an opt‑in 4 kB add‑on – if you don’t import it, you don’t pay for it.

npm install featuredrop@3

AdoptionEngine – the heart of the system

┌─────────────────────────────────────────┐
│           AdoptionEngine                │
├──────────────┬──────────────────────────┤
│ Behavior     │ Tracks sessions, dismiss │
│ Tracker      │ patterns, engagement     │
├──────────────┼──────────────────────────┤
│ Timing       │ Cooldowns, fatigue       │
│ Optimizer    │ detection, optimal gaps │
├──────────────┼──────────────────────────┤
│ Format       │ Badge vs toast vs modal  │
│ Selector     │ based on user behavior   │
├──────────────┼──────────────────────────┤
│ Adoption     │ A‑F grading, breakdown, │
│ Scorer       │ recommendations          │
└──────────────┴──────────────────────────┘

Basic usage

import { FeatureDropProvider } from 'featuredrop/react';
import { createAdoptionEngine } from 'featuredrop/engine';
import { LocalStorageAdapter } from 'featuredrop';
import features from './features.json';

const engine = createAdoptionEngine();

function App() {
  return (
    <FeatureDropProvider engine={engine} features={features}>
      {/* Your app goes here */}
    </FeatureDropProvider>
  );
}

That’s it. The engine now observes user behavior and makes decisions. No extra configuration required.

Smart hook – let the engine decide the format

import { useSmartFeature } from 'featuredrop/react/hooks';

function Sidebar() {
  const { show, format, feature, dismiss, confidence } =
    useSmartFeature('ai-search');

  if (!show) return null;

  // Engine decided: badge for power users, toast for new users
  if (format === 'badge')
    return <>{feature.label}</>;

  if (format === 'toast')
    return <>{feature.description}</>;

  if (format === 'banner')
    return <>{feature.label}</>;
}

confidence tells you how sure the engine is.
- First session → low confidence → conservative format.
- Tenth session with clear patterns → high confidence → optimal format.

Without the engine, the hook gracefully degrades — always shows, always uses badge format. Zero breaking changes.

One‑component solution

import { SmartAnnouncement } from 'featuredrop/react';

// Engine picks the format automatically
<SmartAnnouncement featureId="new-feature" />;

// Or bring your own UI with render props
<SmartAnnouncement featureId="new-feature">
  {({ feature, format, dismiss }) => (
    <div className={format}>
      <h3>{feature.label}</h3>
      <button onClick={dismiss}>Dismiss</button>
    </div>
  )}
</SmartAnnouncement>

Built‑in format renderers (6): badge, toast, banner, inline, modal, spotlight. Each adapts to the user.

First‑class framework integrations

Next.js (Server Component)

// app/layout.tsx
import { getNewCountServer, FeatureDropScript } from 'featuredrop/next';

export default async function Layout({ children }) {
  const manifest = await getManifest();
  const dismissed = await getDismissedIds(userId);
  const newCount = getNewCountServer(manifest, dismissed);

  return (
    <html>
      <head>
        <FeatureDropScript />
      </head>
      <body>
        <header>
          What’s New {newCount > 0 && <span>{newCount}</span>}
        </header>
        {children}
      </body>
    </html>
  );
}

Similar native integrations exist for Remix, Astro, and Nuxt — each creates a fresh MemoryAdapter per request, avoiding shared state and race conditions.

shadcn/ui components

# Changelog widget for React — yours to customize
npx shadcn@latest add https://featuredrop.dev/r/changelog-widget.json
npx shadcn@latest add https://featuredrop.dev/r/new-badge.json
npx shadcn@latest add https://featuredrop.dev/r/tour.json
npx shadcn@latest add https://featuredrop.dev/r/checklist.json
npx shadcn@latest add https://featuredrop.dev/r/feedback-widget.json

The shadcn registry turns FeatureDrop into a React component library that lives in your codebase.

Uses your existing shadcn primitives (Badge, Sheet, Dialog).
Respects your Tailwind theme and design tokens.
No extra CSS from us — yours.

AI‑assisted setup

npx featuredrop ai-setup

The command auto‑detects your editor and creates the right context, so every AI coding assistant now understands FeatureDrop.

Editor

What it creates

Tool	Files / Config
Claude Code	`.claude/skills/featuredrop.md` + `MCP` config
Cursor	`.cursorrules` + `.cursor/mcp.json`
VS Code	`.vscode/mcp.json`

The MCP server gives your AI assistant:

5 tools – scaffold features, validate manifests, suggest components, …
6 resources – hooks reference, component catalog, adapter guide, …

Example: Tell Claude “add a changelog to my sidebar” and it will generate the correct imports, hooks, and provider setup on the first try.

Product‑adoption‑tool comparison

Capability	Pendo	FeatureDrop v3
Feature announcements	✅	✅
Product tours	✅	✅
Checklists	✅	✅
NPS / Surveys	✅	✅
Feedback collection	✅	✅
Smart timing	Server‑side, weeks of data	Client‑side, session 1
Format adaptation	Manual rules	Automatic
Adoption scoring	Dashboard only	In‑app hooks
Bundle size	100–300 kB	3 kB core + 4 kB engine
Data collection	Their servers	Your browser – that’s it
Price	$7,000+/year	$0
Vendor lock‑in	✅	MIT licensed

Key takeaway: You don’t need a $7 k analytics pipeline to make smart adoption decisions. A 4 kB client‑side engine with localStorage is enough.

Getting started

npm install featuredrop

Create features.json with your feature definitions.
Wrap your app in <FeatureDropProvider …>.
Drop <SmartAnnouncement …> wherever you want.

That’s it – the engine handles the rest.

Resources:
[GitHub] | [Docs] | [shadcn Components] | [Example App]

FeatureDrop Cloud (hosted dashboard for teams) is coming soon. The open‑source library stays free forever.

Discussion

If you’ve used Pendo, Appcues, or Beamer, what made you pay for them versus building in‑house? I’d love to hear your thoughts in the comments.

I’m GDS K S, building FeatureDrop at GLINR Studios. ⭐️ Star the repo if this is useful.