flags

Provider-agnostic feature flags SDK for Next.js and React — toggle features without redeploying.

flags

React

Provider-agnostic feature flags SDK for Next.js and React — toggle features without redeploying.

npm GitHub Docs

Fit

Bundle (gzip)

11.5 kB

42.6 kB raw

Install size includes transitive dependencies. Bundle size is gzipped browser payload.

Freshness

The Problem

Deploying a feature flag system from scratch is deceptively complex:

Hard-coding if (process.env.FEATURE_X === "true") doesn't scale and requires a redeploy to change
Most feature flag services (LaunchDarkly, Split, etc.) lock you into their SDK and pricing
Rolling your own database-backed flags adds latency to every request
No standard way to preview flag states before shipping

What It Does

flags is a provider-agnostic SDK that gives you type-safe feature flags in Next.js. It works with any backend — Vercel Edge Config, your own database, or any third-party flag service. Flags are evaluated at the edge for zero added latency, and it integrates with the Vercel Toolbar so you can override flags in production without touching code.

Installation

bash

npm install flags

Usage Example

Define a flag

// flags/index.ts
import { flag } from "flags/next";

export const showNewDashboard = flag<boolean>({
  key: "show-new-dashboard",
  defaultValue: false,
  async decide() {
    // Read from anywhere: env var, DB, Edge Config, LaunchDarkly, etc.
    return process.env.SHOW_NEW_DASHBOARD === "true";
  },
});

Use in a Next.js Server Component

tsx

// app/dashboard/page.tsx
import { showNewDashboard } from "@/flags";

export default async function DashboardPage() {
  const isNewDashboard = await showNewDashboard();

  if (isNewDashboard) {
    return <NewDashboard />;
  }

  return <LegacyDashboard />;
}

Precompute flags for static rendering

tsx

// app/dashboard/page.tsx
import { precompute } from "flags/next";
import { showNewDashboard } from "@/flags";

export async function generateStaticParams() {
  // Pre-renders a version of the page for each flag combination
  return precompute([showNewDashboard]);
}

export default async function DashboardPage({ params }) {
  const isNewDashboard = await showNewDashboard(params);
  return isNewDashboard ? <NewDashboard /> : <LegacyDashboard />;
}

Use with Vercel Edge Config (sub-millisecond reads)

import { flag } from "flags/next";
import { createClient } from "@vercel/edge-config";

const edgeConfig = createClient(process.env.EDGE_CONFIG);

export const betaAccess = flag<boolean>({
  key: "beta-access",
  defaultValue: false,
  async decide() {
    return edgeConfig.get("beta-access") ?? false;
  },
});

Related packages

cmdkReact

Fast, composable command palette for React — keyboard-driven search UI with fuzzy filtering and accessible markup out of the box.

@dnd-kit/coreReact

Modern, accessible drag-and-drop toolkit for React — fully customizable with keyboard support, collision detection, and zero dependencies.

embla-carousel-reactReact

Lightweight, extensible carousel library for React — smooth scrolling, touch/mouse drag, and full CSS control without prescribing markup.

framer-motionReact

Production-ready declarative animation library for React — gestures, layout animations, and scroll-driven effects with a clean API.

input-otpReact

Accessible, unstyled one-time-password input for React — the OTP field used by the shadcn/ui component.