FeatureFlag

featureflag-1779394026063.tsx

'use client'
import { useState } from 'react'

const FLAGS = [
  { id:'dark-mode', name:'Dark Mode', desc:'Global dark theme', enabled:true, rollout:100 },
  { id:'ai-suggest', name:'AI Suggestions', desc:'Smart component suggestions', enabled:true, rollout:50 },
  { id:'v2-api', name:'API v2', desc:'New REST API endpoints', enabled:false, rollout:0 },
  { id:'beta-dash', name:'Beta Dashboard', desc:'New analytics dashboard', enabled:false, rollout:20 },
]

export default function FeatureFlag() {
  const [flags, setFlags] = useState(FLAGS)
  const toggle = (id) => setFlags(f => f.map(x => x.id===id ? { ...x, enabled:!x.enabled } : x))
  const setRollout = (id, v) => setFlags(f => f.map(x => x.id===id ? { ...x, rollout:Number(v) } : x))
  return (
    <div style={{ background:'#fff', borderRadius:'16px', overflow:'hidden', boxShadow:'0 2px 16px rgba(0,0,0,0.06)', maxWidth:'480px' }}>
      <div style={{ padding:'16px 20px', borderBottom:'1px solid #f1f5f9', fontWeight:700, fontSize:'15px', color:'#1e293b' }}>
        Feature Flags
      </div>
      {flags.map(flag => (
        <div key={flag.id} style={{ padding:'14px 20px', borderBottom:'1px solid #f8fafc', display:'flex', alignItems:'center', gap:'12px' }}>
          <div style={{ flex:1 }}>
            <div style={{ display:'flex', alignItems:'center', gap:'8px', marginBottom:'4px' }}>
              <span style={{ fontWeight:600, fontSize:'14px', color:'#1e293b' }}>{flag.name}</span>
              <span style={{ fontSize:'11px', background:flag.enabled?'#d1fae5':'#fee2e2', color:flag.enabled?'#065f46':'#991b1b', padding:'2px 7px', borderRadius:'9999px', fontWeight:600 }}>
                {flag.enabled ? 'ON' : 'OFF'}
              </span>
            </div>
            <div style={{ fontSize:'12px', color:'#94a3b8', marginBottom:'8px' }}>{flag.desc}</div>
            {flag.enabled && (
              <div style={{ display:'flex', alignItems:'center', gap:'8px' }}>
                <input type="range" min="0" max="100" value={flag.rollout} onChange={e => setRollout(flag.id, e.target.value)} style={{ flex:1, accentColor:'#6d28d9' }} />
                <span style={{ fontSize:'12px', fontWeight:700, color:'#6d28d9', minWidth:'35px' }}>{flag.rollout}%</span>
              </div>
            )}
          </div>
          <div onClick={() => toggle(flag.id)} style={{
            width:'44px', height:'24px', borderRadius:'12px', cursor:'pointer',
            background:flag.enabled ? '#6d28d9' : '#e2e8f0', position:'relative', transition:'background 0.3s', flexShrink:0,
          }}>
            <div style={{ position:'absolute', top:'3px', left:flag.enabled?'23px':'3px', width:'18px', height:'18px', borderRadius:'50%', background:'#fff', transition:'left 0.25s', boxShadow:'0 1px 4px rgba(0,0,0,0.2)' }} />
          </div>
        </div>
      ))}
    </div>
  )
}

Component info

CategoryDashboard & App UI

Frameworkreact

TierFREE

Copies0

About

Feature flag control panel with toggle, rollout percentage and status

More from Dashboard & App UI

import React from 'react';

interface MetricCardProps {
  value: number;
  trend: 'up' | 'down';
  sparklineData: number[];
}

const MetricCard: React.FC<MetricCardProps> = ({ value, trend, sparklineData }) => {
  return (
    <div style={{ backgroun

MetricCard

Dashboard & App UI

import React from 'react';
import './ProgressRing.css';
interface ProgressRingProps {
  percentage: number;
}
const ProgressRing: React.FC<ProgressRingProps> = ({ percentage }) => {
  const circleDashArray = 2 * Math.PI * 50;
  const circleDashOffset

ProgressRing

Dashboard & App UI

'use client';

import React from 'react';

interface KPIWidgetProps {
  metric: number;
  label: string;
  target: number;
  progress: number;
  sparklineData: number[];
  periodComparison: string;
}

const KPIWidget: React.FC<KPIWidgetProps> = ({

KPIWidget

Dashboard & App UI

'use client'
import { useState, useEffect, useRef } from 'react'

const METRICS = [
  { label: 'Monthly Revenue', value: 48320, prev: 41200, prefix: '$', suffix: '', color: '#C9A84C', data: [22,28,24,32,28,38,35,42,40,48] },
  { label: 'Active Users'

KPICards

Dashboard & App UI