Built on Vercel's Flags SDK

Feature flags, typed and testable.

A developer-focused toolkit for flags-as-code: Zod-validated definitions, server-side resolution, a CLI wizard, and a shadcn-style component registry you own.

Read the docs Try the live demo

flags/defs/checkout-redesign.flag.ts

import { defineFlag } from "@/lib/flags/kit";

export default defineFlag({
  key: "checkout-redesign",
  schema: z.boolean(),
  defaultValue: false,
  client: { public: true },
  async decide(ctx) {
    const user = await ctx.getUser?.();
    return user?.plan === "pro";
  },
});

Live demo

Flip a flag, watch it resolve

These are real flags from this project, resolved through FlagsTestProvider. Toggle the controls and the preview re-renders exactly as it would in production.

enable-ai-assistant

boolean · shows the AI action in the toolbar

pagination-ui-location

enum · where paging controls render

theme-mode

enum · repaints the preview surface

resolved flags

{
  "enable-ai-assistant-in-pdf-toolbar": false,
  "pagination-ui-location": "bottom",
  "theme-mode": "light"
}

report.pdf

Prev123Next

Toolkit

Everything around the flag, handled

The Flags SDK gives you the resolution engine. Fargo Flags adds the ergonomics: authoring, distribution, testing, and validation.

Typed flags-as-code

Every flag is a Zod-validated definition with an inferred type. No string keys at call sites, no drift between config and code.

Server-side resolution

Flags resolve during SSR through the Flags SDK's evaluate(), so there's no layout shift and pages stay static.

CLI wizard

Scaffold a new flag, its schema, and registry wiring in one interactive command — managed regions keep edits conflict-free.

Component registry

Install the provider, <Flag> component, and CLI straight into your codebase with shadcn — you own the source, no black box.

Testing utilities

FlagsTestProvider lets you override any flag in tests and stories, so every variant is trivial to render and assert.

CI consistency checks

A built-in checker verifies schemas, registry, and client exposure stay in sync — wire it into CI to catch mismatches early.

Workflow

From definition to test in four steps

One consistent API across the whole lifecycle of a flag.

flags/defs/checkout-redesign.flag.ts

import { z } from "zod";
import { defineFlag } from "@/lib/flags/kit";

export const key = "checkout-redesign" as const;
export const schema = z.boolean();

export default defineFlag({
  key,
  schema,
  description: "New checkout flow",
  defaultValue: false,
  client: { public: true },
  async decide(ctx) {
    const user = await ctx.getUser?.();
    return user?.plan === "pro";
  },
});

Registry

Install only what you need

Every piece ships through a shadcn-compatible registry. Pull the whole toolkit or a single component — the source lands in your repo, yours to edit.

flags-complete

recommended

The full toolkit — core, components, and CLI in one command.

flags-core

Kit, runtime, server resolution, and the flags provider.

flags-flag

The declarative <Flag> component for conditional rendering.

flags-test-provider

Override any flag in tests and stories.

flags-cli

Interactive wizard and consistency checker scripts.

Ship your next flag in minutes

Add the toolkit, run the wizard, and get a typed, testable flag wired end to end — resolution, components, and CI checks included.

Get started Star on GitHub

import { defineFlag } from "@/lib/flags/kit"; export default defineFlag({ key: "checkout-redesign", schema: z.boolean(), defaultValue: false, client: { public: true }, async decide(ctx) { const user = await ctx.getUser?.(); return user?.plan === "pro"; }, });

import { z } from "zod"; import { defineFlag } from "@/lib/flags/kit"; export const key = "checkout-redesign" as const; export const schema = z.boolean(); export default defineFlag({ key, schema, description: "New checkout flow", defaultValue: false, client: { public: true }, async decide(ctx) { const user = await ctx.getUser?.(); return user?.plan === "pro"; }, });