Feature Flag
A feature-flag card: per-environment switches and a rollout percentage you drag in steps, with a staged Save.
feature-flag.tsxfeature-flag.css
Checking access…
Overview
Each environment (Development, Staging, Production) has its own switch. Production adds a rollout slider that snaps to 1, 5, 10, 25, 50 and 100 percent and shows roughly how many users that is.
Changes are staged: a bar appears with what will change and Save / Discard, so nothing ships by accident.
When to use
- Internal admin tools, developer platforms, release management.
When not to use
- End-user settings.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/feature-flag.json$
npx shadcn@latest add https://sundaeui.dev/r/feature-flag.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/feature-flag.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/feature-flag.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy feature-flag.tsx and feature-flag.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { FeatureFlag } from '@/components/sundae/feature-flag'
<FeatureFlag />Props
| Prop | Type | Default |
|---|---|---|
flag*Flag identity. | { key: string; description: string } | — |
envs*Environments. | { id: string; label: string; on: boolean }[] | — |
usersProduction user count for the estimate. | number | — |
onSaveCalled on Save. | (state) => void | — |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- Switches are role="switch"; the rollout is a slider with aria-valuetext “25 percent, about 3,100 users”.
- The pending-changes bar is announced.
- Reduced motion removes the movement and keeps every state change.
Customization
- Colours are CSS custom properties on .sd-ffl; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
FAQ
- Is Feature Flag free?
- Feature Flag is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Feature Flag?
- Run npx shadcn@latest add https://sundaeui.dev/r/feature-flag.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Feature Flag support keyboard and screen readers?
- Switches are role="switch"; the rollout is a slider with aria-valuetext “25 percent, about 3,100 users”. The pending-changes bar is announced.
- Does Feature Flag respect reduced motion?
- Reduced motion removes the movement and keeps every state change.
More like this
All forms →Async Switch
Forms · RefinedEnv Editor
Forms · RefinedFilter Chips
Forms · RefinedNotification Matrix
Forms · Refined- Pro
Shortcut Recorder
Forms · Refined Settings List
Forms · Refined