Liquid Toggle

New

A switch whose knob stretches like a water drop

$ npx @hritik-sharmaa/repeat-ui add commons-liquid-toggle
Category
Commons
Added
Nov 1, 2026
Version
1.0.0
Packages
motion
Flavors
TS · JS · Tailwind · CSS
Live preview
Customize
60px
34px
import CommonsLiquidToggle from "@/components/repeat-ui/commons-liquid-toggle/preview";

<CommonsLiquidToggle label="Notifications" />

Installation

  1. Run the command

    Adds the files and installs any packages they need. Works with npm, pnpm, yarn and bun.

    $ npx @hritik-sharmaa/repeat-ui add commons-liquid-toggle --variant ts-tailwind

  2. Use it

    The files are in components/repeat-ui/commons-liquid-toggle/.

    import CommonsLiquidToggle from "@/components/repeat-ui/commons-liquid-toggle/preview";

export default function Page() {
  return <CommonsLiquidToggle />;
}

Props

PropTypeDefaultDescription
checkedboolean-Controlled state; leave out to let the toggle manage itself.
defaultCheckedbooleanfalseStarting state when uncontrolled.
onChange(checked: boolean) => void-Called with the new state.
labelstring"Notifications"Text beside the switch.
widthnumber60Track width in pixels.
heightnumber34Track height in pixels.
onColorstring"#fa5f1b"Track colour when on.
offColorstring"#3f3f46"Track colour when off.
knobColorstring"#ffffff"Knob colour.
disabledbooleanfalseDisable the switch.
classNamestring""Extra classes for the root element.

More commons

See all
AccordianAccordion component with smooth expand/collapse animations
Document Upload ModalDocument upload modal with drag and drop support
Search BarSearch bar component with keyboard shortcuts (Ctrl+K) and modal support