Liquid Button

Button with a liquid blob that follows the cursor using a radial gradient fill effect. Smooth mousemove tracking.

Code

import { LiquidButton } from "@/components/ui/liquid-button"

export default function Example() {
  return (
    <div className="flex gap-4">
      <LiquidButton>Click me</LiquidButton>
      <LiquidButton variant="outline">Outline</LiquidButton>
    </div>
  )
}

Installation

$npx particleui-cli add liquid-button

Usage

TSX

import { LiquidButton } from "@/components/ui/liquid-button"

export default function Example() {
  return (
    <div className="flex gap-4">
      <LiquidButton>Click me</LiquidButton>
      <LiquidButton variant="outline">Outline</LiquidButton>
    </div>
  )
}

Props

Prop	Type	Default	Required
children	React.ReactNode	—	yes
className	string	—	no
variant	"default" \| "accent" \| "ghost"	`"default"`	no

Details

Source filecomponents/ui/liquid-button.tsx

Typeui

Categoriesbuttons, particles

npm dependencies

Registry deps

Claude skill—