NeonToggle

neontoggle-1779388705584.tsx

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

export default function NeonToggle({ label = "Enable AI Mode", defaultOn = false, color = "#6366f1" }) {
  const [on, setOn] = useState(defaultOn);
  const [pressing, setPressing] = useState(false);

  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: '14px',
      fontFamily: 'system-ui, sans-serif', cursor: 'pointer',
    }} onClick={() => setOn(o => !o)}>
      <div
        onMouseDown={() => setPressing(true)}
        onMouseUp={() => setPressing(false)}
        style={{
          width: '56px', height: '28px',
          borderRadius: '14px',
          background: on ? color : 'rgba(255,255,255,0.08)',
          border: `1px solid ${on ? color : 'rgba(255,255,255,0.15)'}`,
          position: 'relative',
          transition: 'all 0.3s ease',
          boxShadow: on ? `0 0 20px ${color}60, 0 0 40px ${color}30` : 'none',
        }}
      >
        <div style={{
          position: 'absolute',
          top: '3px',
          left: on ? '31px' : '3px',
          width: pressing ? '26px' : '20px',
          height: '20px',
          borderRadius: '10px',
          background: on ? '#fff' : 'rgba(255,255,255,0.5)',
          transition: 'all 0.25s cubic-bezier(0.4,0,0.2,1)',
          boxShadow: on ? '0 2px 8px rgba(0,0,0,0.3)' : 'none',
        }} />
      </div>
      <div>
        <p style={{ margin: 0, color: '#F5F5F0', fontSize: '14px', fontWeight: 600 }}>{label}</p>
        <p style={{ margin: '2px 0 0 0', color: on ? color : 'rgba(245,245,240,0.4)', fontSize: '12px', transition: 'color 0.3s' }}>
          {on ? 'Active' : 'Inactive'}
        </p>
      </div>
    </div>
  );
}

Component info

CategoryUtility

Frameworkreact

TierFREE

Copies0

About

Glowing neon toggle switch with color themes

More from Utility

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

const PRESETS = [
  { name: 'Gold', primary: '#C9A84C', bg: '#0A0A0A', accent: '#6366f1' },
  { name: 'Neon', primary: '#22d3ee', bg: '#030712', accent: '#a78bfa' },
  { name: 'Crimson', primary: '#ef444

ThemeCustomizer

Utility

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

interface UploadedFile {
  id: number
  name: string
  size: number
  type: string
  progress: number
  done: boolean
  error?: string
}

const ALLOWED = ['image/png', 'image/jpeg', 'image/w

FileUploadZone

Utility

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

interface ClipItem {
  id: number
  content: string
  type: 'text' | 'code' | 'url' | 'email'
  pinned: boolean
  time: number
}

const INITIAL: ClipItem[] = [
  { id: 1, content: 'npx empire-ui-mcp --st

ClipboardManager

Utility

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

export default function DragRankList() {
  const [items, setItems] = useState([
    { id: 1, label: 'AI Code Review', score: 98 },
    { id: 2, label: 'Performance Audit', score: 87 },
    { id: 3, lab

DragRankList

Utility