Feature Flag Toggle

A settings row for flipping a feature flag on or off: flag name, optional description and a labeled switch, wired as a controlled React component.

src/registry/ui/feature-flag-toggle.tsx/r/feature-flag-toggle.json

Installation#

bash

npx shadcn@latest add @minidev/feature-flag-toggle

MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/feature-flag-toggle.json

Usage#

tsx

import { FeatureFlagToggle } from "@/components/ui/feature-flag-toggle"

export function Example() {
  return (
    <FeatureFlagToggle name="new-checkout" description="Enable redesigned checkout" checked={flag} onCheckedChange={setFlag} />
  )
}

API reference#

FeatureFlagToggle props
Prop	Type	Default
`name*`	`string`	`-`
`description`	`string`	`-`
`checked`	`boolean`	`-`
`onCheckedChange`	`(checked: boolean) => void`	`-`
`className`	`string`	`-`

* required

Dependencies#

npm

React only

Built from

Examples#

WorkflowSteps & boards

Admin User RowUser management row with avatar, online status dot, name, email, a role chip for admin, write or read access, and an accessible actions menu button.Avatar UploadReact profile photo uploader with an avatar preview and an Upload button that opens a hidden image file input. Shows initials until a picture is chosen.Bulk User ImportCSV user import panel with a format hint for email, name and role, a CSV-only dropzone and an Import users button that enables once a file is added.Connected AccountTailwind settings row for a linked third party account showing the provider and account name, with a Disconnect button. For OAuth and integrations.Danger ZoneDanger zone settings card with a red outline, a warning that the action cannot be undone and a destructive delete button. Put it last on settings pages.Delete Account ConfirmAccount deletion step with a danger alert and a confirmation field: the delete button stays disabled until the user types DELETE. Guards against misclicks.

All settings page components

Learn more

What is Toggle switch?Glossary