Liquid Switch

Forms 17

About

An animated toggle switch whose thumb squashes and stretches like liquid glass when flicked on or off.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Liquid Switch to your project and fits it to your theme.

Code

How Liquid Switch is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { LiquidSwitch } from "@/components/ui/liquid-switch";

export default function LiquidSwitchDemo() {
  return (
    <div className="lq-provider" data-liquid-theme="dark">
      <div className="flex items-center gap-8 p-10">
        <LiquidSwitch defaultChecked label="Refraction" />
        <LiquidSwitch label="Ambient motion" />
        <LiquidSwitch disabled label="Locked" />
      </div>
    </div>
  );
}