Switch

The Switch component is a toggleable form control built on top of Radix UI's Switch Primitive, enhanced with beautiful animations using Framer Motion. It provides a user-friendly way to toggle between two states with smooth transitions and various visual styles.

Preview

Code

import { Switch } from '@ignix-ui/switch';

<Switch variant="default" animation="default" defaultChecked />

Installation

CLI

ignix add component switch

manual

'use client';

import { useState } from 'react';
import * as React from 'react';
import * as SwitchPrimitives from '@radix-ui/react-switch';
import { motion, type Variants } from 'framer-motion';
import { cn } from '../../../utils/cn';

const animations = {
  default: {
    checked: { 
      x: 16,
      transition: { type: 'spring', stiffness: 300, damping: 20 }
    },
    unchecked: { 
      x: 0,
      transition: { type: 'spring', stiffness: 300, damping: 20 }
    },
  },
  bounce: {
    checked: {
      x: 16,
      scale: [1, 1.1, 1],
      transition: { 
        type: 'spring', 
        stiffness: 500, 
        damping: 15,
        scale: { duration: 0.3 }
      },
    },
    unchecked: {
      x: 0,
      scale: [1, 1.1, 1],
      transition: { 
        type: 'spring', 
        stiffness: 500, 
        damping: 15,
        scale: { duration: 0.3 }
      },
    },
  },
  scale: {
    checked: {
      x: 16,
      scale: 1.1,
      filter: "brightness(1.1)",
      transition: { 
        type: 'spring', 
        stiffness: 400, 
        damping: 12,
        duration: 0.5
      },
    },
    unchecked: {
      x: 0,
      scale: 1,
      filter: "brightness(1)",
      transition: { 
        type: 'spring', 
        stiffness: 400, 
        damping: 12,
        duration: 0.5
      },
    },
  },
  rotate: {
    checked: {
      x: 16,
      rotate: 180,
      scale: 1.1,
      filter: "brightness(1.2)",
      transition: { 
        type: 'spring', 
        stiffness: 300, 
        damping: 15,
        duration: 0.6
      },
    },
    unchecked: {
      x: 0,
      rotate: 0,
      scale: 1,
      filter: "brightness(1)",
      transition: { 
        type: 'spring', 
        stiffness: 300, 
        damping: 15,
        duration: 0.6
      },
    },
  },
  fade: {
    checked: {
      x: 16,
      opacity: 1,
      scale: 1,
      filter: "blur(0px)",
      transition: { 
        duration: 0.4, 
        ease: [0.4, 0, 0.2, 1],
        type: 'tween'
      },
    },
    unchecked: {
      x: 0,
      opacity: 0.7,
      scale: 0.95,
      filter: "blur(1px)",
      transition: { 
        duration: 0.4, 
        ease: [0.4, 0, 0.2, 1],
        type: 'tween'
      },
    },
  },
  elastic: {
    checked: {
      x: 16,
      scale: 1.1,
      transition: {
        type: 'spring',
        stiffness: 300,
        damping: 10,
        restDelta: 0.001,
        duration: 0.8
      },
    },
    unchecked: {
      x: 0,
      scale: 1,
      transition: {
        type: 'spring',
        stiffness: 300,
        damping: 10,
        restDelta: 0.001,
        duration: 0.8
      },
    },
  },
  pulse: {
    checked: {
      x: 16,
      scale: [1, 1.3, 1],
      boxShadow: [
        '0 0 0 0 rgba(59, 130, 246, 0.4)',
        '0 0 0 8px rgba(59, 130, 246, 0.1)',
        '0 0 0 0 rgba(59, 130, 246, 0.4)'
      ],
      transition: { duration: 0.5, ease: "easeInOut" },
    },
    unchecked: {
      x: 0,
      scale: [1, 1.3, 1],
      boxShadow: [
        '0 0 0 0 rgba(100, 116, 139, 0.4)',
        '0 0 0 8px rgba(100, 116, 139, 0.1)',
        '0 0 0 0 rgba(100, 116, 139, 0.4)'
      ],
      transition: { duration: 0.5, ease: "easeInOut" },
    },
  },
  shake: {
    checked: {
      x: [0, 2, 6, 10, 14, 16],
      y: [0, -3, 0, 3, 0, 0],
      rotate: [0, -5, 5, -3, 3, 0],
      transition: { duration: 0.6, ease: "easeInOut" },
    },
    unchecked: {
      x: [16, 14, 10, 6, 2, 0],
      y: [0, 3, 0, -3, 0, 0],
      rotate: [0, 3, -3, 5, -5, 0],
      transition: { duration: 0.6, ease: "easeInOut" },
    },
  },
  flip: {
    checked: {
      x: 16,
      rotateY: [0, 180, 360],
      scale: [1, 0.8, 1],
      filter: ["brightness(1)", "brightness(1.5)", "brightness(1)"],
      transition: { duration: 0.6, ease: "easeInOut" },
    },
    unchecked: {
      x: 0,
      rotateY: [360, 180, 0],
      scale: [1, 0.8, 1],
      filter: ["brightness(1)", "brightness(1.5)", "brightness(1)"],
      transition: { duration: 0.6, ease: "easeInOut" },
    },
  },
  jelly: {
    checked: {
      x: 16,
      scale: [1, 1.4, 0.6, 1.3, 0.8, 1.2, 0.9, 1.1, 0.95, 1.05, 1],
      rotate: [0, 10, -8, 6, -4, 2, -1, 0],
      transition: { duration: 1, ease: [0.68, -0.55, 0.265, 1.55] },
    },
    unchecked: {
      x: 0,
      scale: [1, 1.4, 0.6, 1.3, 0.8, 1.2, 0.9, 1.1, 0.95, 1.05, 1],
      rotate: [0, -10, 8, -6, 4, -2, 1, 0],
      transition: { duration: 1, ease: [0.68, -0.55, 0.265, 1.55] },
    },
  },
  glow: {
    checked: {
      x: 16,
      boxShadow: [
        '0 0 0 0 rgba(59, 130, 246, 0)',
        '0 0 0 4px rgba(59, 130, 246, 0.3)',
        '0 0 0 12px rgba(59, 130, 246, 0.1)',
        '0 0 0 0 rgba(59, 130, 246, 0)',
      ],
      filter: ["brightness(1)", "brightness(1.3)", "brightness(1)"],
      scale: [1, 1.1, 1],
      transition: { duration: 0.8, ease: "easeInOut" },
    },
    unchecked: {
      x: 0,
      boxShadow: [
        '0 0 0 0 rgba(100, 116, 139, 0)',
        '0 0 0 4px rgba(100, 116, 139, 0.3)',
        '0 0 0 12px rgba(100, 116, 139, 0.1)',
        '0 0 0 0 rgba(100, 116, 139, 0)',
      ],
      filter: ["brightness(1)", "brightness(1.3)", "brightness(1)"],
      scale: [1, 1.1, 1],
      transition: { duration: 0.8, ease: "easeInOut" },
    },
  },
} as const;

const variants = {
  default: {
    root: cn(
      'h-6 w-11 rounded-full',
      'bg-gradient-to-r from-muted/80 to-muted/60 backdrop-blur-sm',
      'border border-border/60 shadow-lg shadow-black/5',
      'data-[state=checked]:from-primary data-[state=checked]:to-primary/80',
      'data-[state=checked]:shadow-primary/30 data-[state=checked]:border-primary/60',
      'dark:shadow-white/5 dark:data-[state=checked]:shadow-primary/30',
      'transition-all duration-300 ease-in-out',
      'hover:data-[state=unchecked]:from-muted/90 hover:data-[state=unchecked]:to-muted/70',
      'hover:data-[state=checked]:from-primary/90 hover:data-[state=checked]:to-primary/70'
    ),
    thumb: cn(
      'h-5 w-5 rounded-full',
      'bg-gradient-to-br from-background via-background to-muted/20',
      'shadow-lg shadow-black/15 dark:shadow-white/10',
      'border border-border/40',
      'before:absolute before:inset-0 before:rounded-full',
      'before:bg-gradient-to-t before:from-white/20 before:to-white/40',
      'before:pointer-events-none'
    ),
    thumbOffset: 20,
  },
  large: {
    root: cn(
      'h-8 w-14 rounded-full',
      'bg-gradient-to-r from-muted/80 to-muted backdrop-blur-sm',
      'border border-border/60 shadow-xl shadow-black/10',
      'data-[state=checked]:from-primary/90 data-[state=checked]:to-primary',
      'data-[state=checked]:shadow-primary/30 data-[state=checked]:border-primary/40',
      'dark:shadow-white/5 dark:data-[state=checked]:shadow-primary/25',
      'transition-all duration-300'
    ),
    thumb: cn(
      'h-7 w-7 rounded-full',
      'bg-gradient-to-br from-background via-background to-muted/20',
      'shadow-xl shadow-black/20 dark:shadow-white/15',
      'border border-border/40',
      'before:absolute before:inset-0 before:rounded-full',
      'before:bg-gradient-to-t before:from-white/20 before:to-white/40',
      'before:pointer-events-none'
    ),
    thumbOffset: 24,
  },
  small: {
    root: cn(
      'h-4 w-8 rounded-full',
      'bg-gradient-to-r from-muted/80 to-muted backdrop-blur-sm',
      'border border-border/60 shadow-md shadow-black/5',
      'data-[state=checked]:from-primary/90 data-[state=checked]:to-primary',
      'data-[state=checked]:shadow-primary/20 data-[state=checked]:border-primary/40',
      'dark:shadow-white/5 dark:data-[state=checked]:shadow-primary/15',
      'transition-all duration-300'
    ),
    thumb: cn(
      'h-3 w-3 rounded-full',
      'bg-gradient-to-br from-background via-background to-muted/20',
      'shadow-md shadow-black/10 dark:shadow-white/5',
      'border border-border/40',
      'before:absolute before:inset-0 before:rounded-full',
      'before:bg-gradient-to-t before:from-white/20 before:to-white/40',
      'before:pointer-events-none'
    ),
    thumbOffset: 16,
  },
  pill: {
    root: cn(
      'h-6 w-11 rounded-full',
      'bg-gradient-to-r from-muted/60 via-muted/80 to-muted/60 backdrop-blur-sm',
      'border border-border/60 shadow-lg shadow-black/5',
      'data-[state=checked]:from-primary/80 data-[state=checked]:via-primary data-[state=checked]:to-primary/80',
      'data-[state=checked]:shadow-primary/25 data-[state=checked]:border-primary/40',
      'dark:shadow-white/5 dark:data-[state=checked]:shadow-primary/20',
      'transition-all duration-300',
      'before:absolute before:inset-0 before:rounded-full',
      'before:bg-gradient-to-t before:from-black/5 before:to-white/10',
      'before:pointer-events-none'
    ),
    thumb: cn(
      'h-5 w-5 rounded-full',
      'bg-gradient-to-br from-background via-background to-muted/20',
      'shadow-lg shadow-black/15 dark:shadow-white/10',
      'border border-border/40',
      'before:absolute before:inset-0 before:rounded-full',
      'before:bg-gradient-to-br before:from-white/30 before:to-transparent',
      'before:pointer-events-none'
    ),
    thumbOffset: 20,
  },
  square: {
    root: cn(
      'h-6 w-11 rounded-lg',
      'bg-gradient-to-br from-muted/80 to-muted backdrop-blur-sm',
      'border border-border/60 shadow-lg shadow-black/5',
      'data-[state=checked]:from-primary/90 data-[state=checked]:to-primary',
      'data-[state=checked]:shadow-primary/25 data-[state=checked]:border-primary/40',
      'dark:shadow-white/5 dark:data-[state=checked]:shadow-primary/20',
      'transition-all duration-300'
    ),
    thumb: cn(
      'h-5 w-5 rounded-md',
      'bg-gradient-to-br from-background via-background to-muted/20',
      'shadow-lg shadow-black/15 dark:shadow-white/10',
      'border border-border/40',
      'before:absolute before:inset-0 before:rounded-md',
      'before:bg-gradient-to-t before:from-white/20 before:to-white/40',
      'before:pointer-events-none'
    ),
    thumbOffset: 20,
  },
  slim: {
    root: cn(
      'h-4 w-12 rounded-full',
      'bg-gradient-to-r from-muted/70 to-muted/90 backdrop-blur-sm',
      'border border-border/60 shadow-md shadow-black/5',
      'data-[state=checked]:from-primary/85 data-[state=checked]:to-primary/95',
      'data-[state=checked]:shadow-primary/20 data-[state=checked]:border-primary/40',
      'dark:shadow-white/5 dark:data-[state=checked]:shadow-primary/15',
      'transition-all duration-300'
    ),
    thumb: cn(
      'h-3 w-3 rounded-full',
      'bg-gradient-to-br from-background via-background to-muted/20',
      'shadow-md shadow-black/10 dark:shadow-white/5',
      'border border-border/40',
      'before:absolute before:inset-0 before:rounded-full',
      'before:bg-gradient-to-t before:from-white/20 before:to-white/40',
      'before:pointer-events-none'
    ),
    thumbOffset: 32,
  },
  ios: {
    root: cn(
      'h-7 w-12 rounded-full',
      'bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200',
      'dark:from-gray-600 dark:via-gray-700 dark:to-gray-600',
      'shadow-inner shadow-black/10 dark:shadow-white/5',
      'border border-gray-300/60 dark:border-gray-600/60',
      'data-[state=checked]:from-emerald-400 data-[state=checked]:via-emerald-500 data-[state=checked]:to-emerald-400',
      'data-[state=checked]:shadow-emerald-500/25 data-[state=checked]:border-emerald-400/40',
      'transition-all duration-300 backdrop-blur-sm',
      'before:absolute before:inset-0 before:rounded-full',
      'before:bg-gradient-to-t before:from-black/5 before:to-white/15',
      'before:pointer-events-none'
    ),
    thumb: cn(
      'h-6 w-6 rounded-full',
      'bg-gradient-to-br from-white via-white to-gray-50',
      'dark:from-gray-100 dark:via-gray-200 dark:to-gray-100',
      'shadow-xl shadow-black/20 dark:shadow-black/40',
      'border border-white/60 dark:border-gray-200/60',
      'before:absolute before:inset-0 before:rounded-full',
      'before:bg-gradient-to-br before:from-white/40 before:to-transparent',
      'before:pointer-events-none'
    ),
    thumbOffset: 20,
  },
  material: {
    root: cn(
      'h-6 w-12 rounded-full',
      'bg-gradient-to-r from-gray-300 via-gray-400 to-gray-300',
      'dark:from-gray-600 dark:via-gray-700 dark:to-gray-600',
      'shadow-inner shadow-black/15 dark:shadow-white/5',
      'border border-gray-400/40 dark:border-gray-600/40',
      'data-[state=checked]:from-blue-400 data-[state=checked]:via-blue-500 data-[state=checked]:to-blue-400',
      'data-[state=checked]:shadow-blue-500/25 data-[state=checked]:border-blue-400/40',
      'transition-all duration-300 backdrop-blur-sm'
    ),
    thumb: cn(
      'h-5 w-5 rounded-full',
      'bg-gradient-to-br from-background via-background to-muted/10',
      'shadow-lg shadow-black/15 dark:shadow-white/10',
      'border border-border/40',
      'before:absolute before:inset-0 before:rounded-full',
      'before:bg-gradient-to-t before:from-white/20 before:to-white/40',
      'before:pointer-events-none'
    ),
    thumbOffset: 24,
  },
};

export interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> {
  variant?: keyof typeof variants;
  animation?: keyof typeof animations;
  thumbClassName?: string;
  glowEffect?: boolean;
}

const Switch = React.forwardRef<React.ComponentRef<typeof SwitchPrimitives.Root>, SwitchProps>(
  ({ 
    className, 
    variant = 'default', 
    animation = 'default', 
    thumbClassName, 
    glowEffect = false,
    ...props 
  }, ref) => {
    const selectedVariant = variants[variant] || variants.default;
    const [isChecked, setIsChecked] = useState(props.checked || false);
    const [isHovered, setIsHovered] = useState(false);

    const thumbOffset = selectedVariant.thumbOffset || 20;
    const dynamicAnimation = {
      ...animations[animation],
      checked: {
        ...animations[animation].checked,
        x: thumbOffset,
      },
    } as unknown as Variants;

    React.useEffect(() => {
      if (props.checked !== undefined) {
        setIsChecked(props.checked);
      }
    }, [props.checked]);

    const handleCheckedChange = (checked: boolean) => {
      setIsChecked(checked);
      props.onCheckedChange?.(checked);
    };

    return (
      <div className="relative inline-block">
        {glowEffect && isChecked && (
          <motion.div
            className="absolute inset-0 rounded-full opacity-30"
            style={{
              background: `radial-gradient(circle, rgba(59, 130, 246, 0.4) 0%, transparent 70%)`,
              filter: "blur(8px)",
              transform: "scale(1.5)"
            }}
            animate={{
              scale: [1.5, 1.7, 1.5],
              opacity: [0.3, 0.5, 0.3]
            }}
            transition={{
              duration: 2,
              repeat: Infinity,
              ease: "easeInOut"
            }}
          />
        )}

        <SwitchPrimitives.Root
          className={cn(
            'peer inline-flex shrink-0 cursor-pointer items-center',
            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
            'disabled:cursor-not-allowed disabled:opacity-50',
            'transform-gpu will-change-transform',
            'hover:scale-105 active:scale-95 transition-transform duration-200',
            selectedVariant.root,
            className
          )}
          {...props}
          checked={isChecked}
          onCheckedChange={handleCheckedChange}
          onMouseEnter={() => setIsHovered(true)}
          onMouseLeave={() => setIsHovered(false)}
          ref={ref}
        >
          {/* Track shimmer effect */}
          <motion.div
            className="absolute inset-0 rounded-[inherit] bg-gradient-to-r from-transparent via-white/10 to-transparent -skew-x-12 pointer-events-none"
            transition={{
              x: {
                duration: 1,
                repeat: isHovered ? Infinity : 0,
                repeatDelay: 0.5,
                ease: "easeInOut"
              }
            }}
          />

          <SwitchPrimitives.Thumb asChild>
            <motion.span
              className={cn(
                'pointer-events-none block ring-0 relative overflow-hidden',
                'transform-gpu will-change-transform',
                selectedVariant.thumb,
                thumbClassName
              )}
              initial={false}
              animate={isChecked ? 'checked' : 'unchecked'}
              variants={dynamicAnimation}
              whileHover={{
                scale: 1.05,
                transition: { duration: 0.2 }
              }}
              whileTap={{
                scale: 0.95,
                transition: { duration: 0.1 }
              }}
            >
              <motion.div
                className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -skew-x-12 pointer-events-none rounded-[inherit]"
                animate={{
                  x: isChecked ? ["-100%", "100%"] : "-100%"
                }}
                transition={{
                  x: {
                    duration: 0.8,
                    delay: 0.2,
                    ease: "easeInOut"
                  }
                }}
              />
            </motion.span>
          </SwitchPrimitives.Thumb>
        </SwitchPrimitives.Root>
      </div>
    );
  }
);

Switch.displayName = SwitchPrimitives.Root.displayName;

export { Switch };

Usage

Import the component:

import { Switch } from '@ignix-ui/switch';

Basic Usage

function BasicSwitch() {
  return <Switch defaultChecked />;
}

Props

Prop	Type	Default	Description
variant	'default' | 'large' | 'small' | 'pill' | 'square' | 'slim' | 'ios' | 'material'	'default'	Visual style of the switch
animation	'default' | 'bounce' | 'scale' | 'rotate' | 'fade' | 'elastic' | 'pulse' | 'shake' | 'flip' | 'jelly' | 'glow'	'default'	Animation applied to the thumb when toggling
glowEffect	boolean	false	When true, renders an animated radial glow behind the switch when checked
thumbClassName	string	-	Additional Tailwind classes applied to the thumb element
className	string	-	Additional Tailwind classes applied to the root switch element