Toggle Switch

The `Toggle Switch` component creates a fluid animated toggle with spring physics and smooth color transitions using Framer Motion.

Liquid Loader

Status: OFF

installation

Install Dependencies

To use the Toggle Switch component, you'll need to install framer-motion:

npm install motion react-icons

Add util file

Create a file named utils.ts in the same directory as the component and add the following code:

lib/utils.ts

import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

use this component in your app

<ToggleSwitch />