Feature flagsPro

• Per-environment state
• Percentage rollout slider
• Search
• Change log

• Internal tools and developer platforms.

• End-user settings: use switches.

Import it from @/components/blocks/feature-flags after installing. It ships with sample data, so it renders straight away; swap in your own data when you're ready.

import { FeatureFlags } from "@/components/blocks/feature-flags";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <FeatureFlags />
    </main>
  );
}

• Every switch and slider is labelled with the flag key.

• Change-log entries slide in.

• Each flag becomes a card below 768px.

• Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

• Write changes to your flag service in the switch and slider commit handlers.