Feature Flags Manager

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/devtools/devtools16.tsx instead.

Usage

The file also exports devtools16Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Devtools16, devtools16Demo } from "@/components/blocks/devtools/devtools16";

export default function Page() {
  return <Devtools16 {...devtools16Demo} />;
}

Props

Types

type FlagEnvironment = "production" | "staging" | "development";

type FeatureFlag = {
  key: string;
  name: string;
  description: string;
  enabled: boolean;
  rolloutPercent: number;
  environments: FlagEnvironment[];
};

Behavior notes

• Toggle switches are real local state (a role="switch" button per flag) seeded from each flag's enabled value; there is no backend, so refreshing the page resets every flag to its original state.
• The rollout bar reflects the static rolloutPercent value passed in; dragging or clicking the bar does not change the percentage, only the toggle switch is interactive.
• Environment badges (prod/staging/dev) are read-only labels; there is no per-environment override of the toggle.
• Flags are rendered in a single fixed-order list; there is no search, filtering, or grouping by environment.