Elastic Toggle Switch

Toggle switch with elastic spring animation

toggleswitchspring

Useto navigate between components

Preview

Code

TypeScript + React

'use client'

import { motion } from 'framer-motion'
import { useState } from 'react'

export function ElasticSwitch() {
  const [isOn, setIsOn] = useState(false)

  return (
    <button
      onClick={() => setIsOn(!isOn)}
      className={`relative h-12 w-24 rounded-full p-1 transition-colors ${
        isOn ? 'bg-accent' : 'bg-gray-300 dark:bg-gray-600'
      }`}
    >
      <motion.div
        layout
        transition={{
          type: 'spring',
          stiffness: 700,
          damping: 30,
        }}
        className={`h-10 w-10 rounded-full bg-white shadow-md ${
          isOn ? 'ml-auto' : ''
        }`}
      />
    </button>
  )
}

How to Use

1Install Framer Motion: npm install framer-motion
2Copy the code from above
3Paste it into your project and customize as needed
4Colors are customizable via Tailwind CSS classes. The default theme uses dark mode colors defined in your globals.css file