How to Create an Animated Toggle in React JS & Tailwind CSS

Toggle switches are a simple yet impactful UI element for switching between two states, like Light Mode and Dark Mode. In this tutorial, we will build an interactive, animated toggle using React JS and Tailwind CSS. This toggle will include animations, transitions, and fun visual elements to make your UI stand out.

Final Output

You’ll create a toggle switch that smoothly transitions between Light Mode and Dark Mode, with animations that include images and background effects.

Step-by-Step Tutorial

Step 1: Set Up Your React Project

Make sure you have a React environment set up. If not, create one by running:

npx create-react-app animated-toggle
cd animated-toggle
npm install

Also, install Tailwind CSS in your project by following the Tailwind CSS installation guide.

Step 2: Create the Button Component

Create a new file called button.js and add the following code:

// eslint-disable-next-line react/prop-types
function Button({ isDark, setIsDark }) {
  const parentWidth = 144;
  const childWidth = 56;
  const padding = 16;

  const availableWidth = parentWidth - padding;

  const translationDistance = availableWidth - childWidth;

  return (
    <>
      <div
        className={`relative cursor-pointer inline-flex w-36 h-16 items-center transition-all p-2 duration-500 rounded-full overflow-hidden shadow-xl

 ${isDark ? "bg-gray-700" : "bg-blue-400"}`}
        onClick={() => setIsDark((prev) => !prev)}
      >
        <div
          className="absolute z-10 flex items-center overflow-hidden transition-all duration-500 bg-yellow-400 rounded-full w-14 h-14"
          style={{
            transform: isDark
              ? `translateX(${translationDistance}px)`
              : "translateX(0)",
          }}
        >
          <div
            className="relative w-full h-full transition-all duration-500 rounded-full shadow-inner bg-gray-50"
            style={{
              transform: isDark
                ? `translateX(0)`
                : `translateX(${translationDistance}px)`,
            }}
          >
            {/* mood dark part */}
            <div className="absolute h-3 w-3 rounded-full bg-gray-300 top-2 left-[45%]"></div>
            <div className="absolute h-3 w-3 rounded-full bg-gray-300 bottom-2 left-[50%]"></div>
            <div className="absolute w-3 h-3 bg-gray-300 rounded-full top-5 left-2"></div>
          </div>
        </div>

        {/* images */}
        <div
          className={`absolute top-3 -right-28 transition-all duration-500
          ${isDark ? "translate-y-[200px]" : "translate-y-0"}`}
        >
          <img src="/cloud.png" alt="cloud" />
        </div>

        <div
          className={`absolute -top-5 -left-0 transition-all duration-500
          ${isDark ? "translate-y-0" : "-translate-y-[200px]"}`}
        >
          <img src="/star.png" alt="stars" />
        </div>


        {/* lines */}
        <div
          className={`absolute h-36 w-36 rounded-full bg-white opacity-[0.09] transition-all duration-500`}
          style={{
            transform: isDark
              ? `translateX(${translationDistance - 20}px)`
              : `translateX(-${translationDistance}px)`,
          }}
        ></div>

        <div
          className={`absolute h-36 w-36 rounded-full bg-white opacity-[0.09] transition-all duration-500`}
          style={{
            transform: isDark
              ? `translateX(${translationDistance - 40}px)`
              : `translateX(-${translationDistance - 20}px)`,
          }}
        ></div>

        <div
          className={`absolute h-36 w-36 rounded-full bg-white opacity-[0.09] transition-all duration-500`}
          style={{
            transform: isDark
              ? `translateX(${translationDistance - 60}px)`
              : `translateX(-${translationDistance - 40}px)`,
          }}
        ></div>
      </div>
    </>
  );
}

export default Button;

Step 3: Create the Main App Component

Now, create your App.js file with the following code:

import { useState } from "react";
import Button from "./button";

function App() {
  const [isDark, setIsDark] = useState(false);

  return (
    <div className={`flex flex-col items-center justify-center h-screen ${isDark ? 'bg-gray-400' : 'bg-white'}`}>
     
     <h1 className="my-4 text-2xl font-bold">{isDark ? "Dark Mode" : "Light Mode"}</h1>
     <Button isDark={isDark} setIsDark={setIsDark} />

    </div>
  );
}

export default App;

Step 4: Add Images

Make sure to place your images (cloud.png and star.png) in the public folder of your project. These images are used to enhance the visual appeal of the toggle.

Step 5: Run Your Application

Run the following command to start your application:

npm start

Open http://localhost:3000 in your browser. You should see the toggle switch with animations and transitions working perfectly.

Download File

Conclusion

In this tutorial, we created an animated toggle switch using React JS and Tailwind CSS. With its interactive transitions and engaging visuals, this component is perfect for enhancing your UI. Feel free to customize the styles and images to fit your project’s theme.

Happy Coding! 🚀