# Feature flags

> Flags per environment with switches, percentage rollouts and a change log.

Block · Pro · https://lodeui.com/blocks/feature-flags

## When to use

- Internal tools and developer platforms.

## When not to use

- End-user settings: use switches.

## Installation

```bash
npx shadcn@latest add @lode/feature-flags
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { FeatureFlags } from "@/components/blocks/feature-flags";

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

Built from: Badge, Segmented control, Slider, Switch

## API reference

### FeatureFlags

Feature flags per environment with percentage rollouts, search and a change log. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through flags |
| Space | Toggle a flag |
| ← / → | Adjust rollout or environment |

## Accessibility

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

## Motion

- Change-log entries slide in.

## Responsive behavior

- Each flag becomes a card below 768px.

## Performance

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

## Notes for AI

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

## Related

- [Switch](https://lodeui.com/components/switch) — A toggle whose thumb stretches as you press it.
- [Slider](https://lodeui.com/components/slider) — Drag, click or use the keys. The value rides above the thumb while you drag.
- [Segmented control](https://lodeui.com/components/segmented-control) — A compact single choice with a pill that slides to the selection.